<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="new_file.css" />
<script type="text/javascript" src="myjs.js" ></script>
</head>
<body>
<div class="wrap">
<div class="head">
<ul>
<li>前端</li>
<li>后台</li>
<li>手机</li>
<li>数据</li>
</ul>
</div>
<div class="bottom">
<div class="f1">
<div class="f2">
<ul class="myul">
<li>HTML/CSS/ JavaScript/ Html5/ CSS3/ jQuery/ WebApp/ Node.js/ AngularJS/ Bootstrap/ 前端工具/</li>
<li>PHP/ Java/ Linux/ Python/ C/ C++/ Go/ C#/ 数据结构/</li>
<li>Android/ iOS/ Unity 3D/ Cocos2d-x/</li>
<li>MySQL/ MongoDB/ 云计算/ Oracle/ 大数据/ SQL Server/</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>*{margin: 0;padding: 0;list-style: none;}
.wrap{width: 1000px;margin: 0 auto;}
.head li,.myul li{float: left;}
.head{width: 100%;height: 50px;background-color: antiquewhite;}
.head li{width: 100px;height: 50px;text-align: center;line-height: 50px;}
.head li:hover{background-color: #7896AF;}
.bottom{width: 100%;height: 0;background-color: #678900;overflow: hidden;}
.f1{width: 500px;height: 500px;margin: 0 auto;background-color: azure;}
.f2{position: relative;top: 150px;width: 500px;height: 100px;background-color: brown;overflow: hidden;}
.myul{position: absolute;left: 0;width: 500%;}
.myul li{width: 500px;line-height: 100px;text-align: center;}function getclsname(cls, parent) {
var oparent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oparent.getElementsByTagName("*");
for(var i = 0; i < elements.length; i++) {
if(elements[i].className == cls) {
eles.push(elements[i]);
}
}
return eles;
}
function getstyle(obj, sty) {
if(obj.currentStyle) {
return obj.currentStyle[sty];
} else {
return window.getComputedStyle(obj, false)[sty];
}
}
var index = 0;
var flag = null;
window.onload = function() {
var lis = getclsname('head')[0].getElementsByTagName("li"),
myul = getclsname('myul')[0],
ow = -parseInt(getstyle(myul.getElementsByTagName("li")[0], 'width'));
for(var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function(event) {
event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
index = this.index;
btshow(500, getclsname('bottom')[0], 'height');
asd(myul,ow,index);
}
}
document.onclick = function() {
flag=null;
btshow(0, getclsname('bottom')[0], 'height');
}
}
function asd(myul,ow,index) {
if(flag == null) {
console.log(flag);
lismove(index, ow);
flag = index;
} else {
if(flag != index) {
btshow(index * ow, myul, 'left');
} else {
return false;
}
}
}
var timer = null;
var speed = 0;
var oh = 0;
function btshow(target, obj, sty) {
clearInterval(timer);
timer = setInterval(function() {
var h = parseInt(getstyle(obj, sty));
if(h == target) {
clearInterval(timer);
} else {
speed = (target - h) / 5
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
h += speed;
obj.style[sty] = h + 'px';
}
}, 50);
}
function lismove(oindex, ow) {
var myul = getclsname('myul')[0];
myul.style.left = oindex * ow + 'px';
}如上代码，先是HTML，然后CSS，最后JS。我所发现的BUG是，快速点击菜单选项，下面内容也会切换，但会突然某个点不动了，永远一直的点不动了，并且之后点击其他菜单选项，下面内容在运动的同时，再点击那个点不动的选项，其他运动停止。非常感谢！
添加回答
举报
0/150
提交
取消