滑动菜单[slidingMove.html]

最新推荐文章于 2021-06-23 11:01:34 发布

大海和云朵

最新推荐文章于 2021-06-23 11:01:34 发布

阅读量378

点赞数

分类专栏： JS小作品

本文链接：https://blog.csdn.net/qq_29592901/article/details/52333795

版权

JS小作品专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、误差不能消除，只是尽量减小误差，不让其差出多余1个像素

2、源代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
#ul1{width:400px;height:30px;position:relative;margin:100px auto 0;}
li{list-style: none;float:left;border:1px solid #ccc;width:98px;height:28px;
text-align: center;line-height: 28px;cursor:pointer;}
.bg{width:100px;height:5px;border:none;position:absolute;top:24px;left:0;
background: red;}
</style>
<script>
window.οnlοad=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var oBg=oUl.getElementsByClassName('bg')[0];
var i=0;
for(i=0;i<aLi.length-1;i++){
aLi[i].οnmοuseοver=function(){
startMove(oBg,this.offsetLeft);
}
}
};
var iSpeed=0;
var left=0;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
iSpeed+=(iTarget-obj.offsetLeft)/5;
iSpeed*=0.7;
left+=iSpeed;
if(Math.abs(left-iTarget)<1 & Math.abs(iSpeed)<1){
clearInterval(obj.timer);
obj.style.left=iTarget+'px';//最后不会出界
//alert('关了');
}else{
obj.style.left=left+'px';
}
document.title=left;
},30);
}
</script>
</head>
<body>
<ul id="ul1">
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<li>联系方式</li>
<li class="bg"></li>
</ul>
</body>
</html>

大海和云朵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动菜单[slidingMove.html]

1、误差不能消除，只是尽量减小误差，不让其差出多余1个像素2、源代码： *{margin:0;padding:0;} #ul1{width:400px;height:30px;position:relative;margin:100px auto 0;} li{list-style: none
复制链接

扫一扫

专栏目录