1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: