弹性运动同样是减速运动，但元素并不是直接停在目标点，而是在目标点附近弹几下再停止。 要理解弹性运动，可以想象一个被拉伸的弹性绳子绑住的小球，小球向绑绳子的木桩运动，并围绕木桩左右运动，最终由于空气阻力的影响，停在木桩处。下面利用封装的txqd.js来实现一个弹性菜单的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nav{
list-style:none;
padding: 0;
margin: 0 50px 0;
text-align:center;
color:white;
font-weight:bold;
background-color: #25517A;
cursor:pointer;
overflow:hidden;
width: 500px;
}
.navItem{
line-height: 30px;
float:left;
width:100px;
text-decoration: none;
color:inherit;
}
#navActive{
width: 100px;
height: 30px;
background-color: rgba(0,0,0,0.3);
position:absolute;
margin-top: -30px;
cursor:pointer;
}
</style>
</head>
<body>
<nav id="nav">
<a class="navItem" href="/">首页</a>
<a class="navItem" href="/pick/">Html/Css</a>
<a class="navItem" href="/candidate/">JavaScript</a>
<a class="navItem" href="/news/">jQuery</a>
<a class="navItem" href="/following">PHP</a>
</nav>
<div id="navActive"></div>
<script src="https://www.qiquanji.com/js/txqd.js"></script>
<script>
//navActive默认处于导航栏最左侧
navActive.style.left = nav.offsetLeft + 'px';
navActive.target = nav.getElementsByTagName('a')[0];
nav.onmousemove = function(e){
e = e || event;
navActive.target = e.target || e.srcElement;
elasticMove({obj:navActive,attr:'left',target:navActive.target.offsetLeft})
}
//点击navActive触发其所在位置的点击事件
navActive.onclick = function(e){
navActive.target.click();
}
</script>
</body>
</html>
</html>
效果点上面的运行代码来看
原文链接：https://www.qiquanji.com/post/8060.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知