js弹性菜单写法

时间：6年前阅读：3871

弹性运动同样是减速运动，但元素并不是直接停在目标点，而是在目标点附近弹几下再停止。　要理解弹性运动，可以想象一个被拉伸的弹性绳子绑住的小球，小球向绑绳子的木桩运动，并围绕木桩左右运动，最终由于空气阻力的影响，停在木桩处。下面利用封装的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,我们将及时处理。

微信扫码关注

更新实时通知

js弹性菜单写法

网友评论