- HTML/CSS/ JavaScript/ Html5/ CSS3/ jQuery/ WebApp/ Node.js/ AngularJS/ Bootstrap/ 前端工具/
- PHP/ Java/ Linux/ Python/ C/ C++/ Go/ C#/ 数据结构/
- Android/ iOS/ Unity 3D/ Cocos2d-x/
- MySQL/ MongoDB/ 云计算/ Oracle/ 大数据/ SQL Server/
*{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.className == cls) { eles.push(elements); } } 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.index = i; lis.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是，快速点击菜单选项，下面内容也会切换，
但会突然某个点不动了，永远一直的点不动了，
并且之后点击其他菜单选项，下面内容在运动的同时，
再点击那个点不动的选项，其他运动停止。
非常感谢！
|
天盟APP下载
