<!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>后臺(tái)</li>
<li>手機(jī)</li>
<li>數(shù)據(jù)</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#/?數(shù)據(jù)結(jié)構(gòu)/</li>
<li>Android/?iOS/?Unity?3D/?Cocos2d-x/</li>
<li>MySQL/?MongoDB/?云計(jì)算/?Oracle/?大數(shù)據(jù)/?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。我所發(fā)現(xiàn)的BUG是，快速點(diǎn)擊菜單選項(xiàng)，下面內(nèi)容也會(huì)切換，但會(huì)突然某個(gè)點(diǎn)不動(dòng)了，永遠(yuǎn)一直的點(diǎn)不動(dòng)了，并且之后點(diǎn)擊其他菜單選項(xiàng)，下面內(nèi)容在運(yùn)動(dòng)的同時(shí)，再點(diǎn)擊那個(gè)點(diǎn)不動(dòng)的選項(xiàng)，其他運(yùn)動(dòng)停止。非常感謝！
請(qǐng)幫我看看，這里存在的BUG，是什么情況？
飛天意大利面神獸
2016-07-23 09:08:25
