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