Home > Article > Web Front-end > 如何用tween.js实现导航条滑动_html/css_WEB-ITnose
如何用tween.js实现导航条滑动_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:49:531648browse
导航条在大多数网站都有应用，今天我们用Tween.js来做一个下方有动态效果的导航条。
图片来源于网络.jpg
HTML5部分
什么是tween.js？
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
<body> <!--div.wrap>div{按钮$}*4--> <div class="wrap"> <div class="middle"> <div>按钮1</div> <div>按钮2</div> <div>按钮3</div> <div>按钮4</div> </div> </div> <div class="slider"></div> </body> CSS3样式部分
<style type="text/css"> .wrap{ width: 400px; height: 100px; background-color: gray; } .middle{ width: 100%; height: 80px; background-color: greenyellow; } .middle>div{ width: 100px; height: 100%; text-align: center; font-size: 20px; line-height: 80px; float: left; } .slider{ width: 100px; height: 10px; border-radius: 5px; background-color: brown; position: absolute; } </style> 以上部分除了slider要绝对定位没什么要特别注意的静态效果如下
静态.PNG
js部分
分析逻辑1.鼠标在导航条外时,下彩条slider在起始位置2.slider随鼠标滑动到相应位置
tween.js效果说明-来源于网络
首先引入tween.js然后定义变量 tween.js下载链接 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
文件.png
如果放在别的文件夹里就引用自相对的文件夹
<script src="js/tween.js" type="text/javascript"></script> <script type="text/javascript"> var divs=document.querySelectorAll(".middle>div"); var slider=document.querySelector(".slider"); var timer = null; 操作 for(var i=0;i<divs.length;i++){ divs[i].index=i; divs[i].onmouseover=function(){ var start = slider.offsetLeft //多加的8是网页自带的边框 var end = this.index*100+8; var change = end-start; var t=0; //duration循环次数 var d=20; //防止定时器混乱,每次用前清一下 clearInterval(timer); timer = setInterval(function () { t++; if (t >= d) { clearInterval(timer); } //结构:Tween动画库.Back动画类型.easeOut缓冲类型 slider.style.left = Tween.Back.easeOut(t, start, change, d) + "px"; }, 30); } } </script> 此处说明1.var end = this.index*100+8;的8是浏览器自带样式,如果用了
*{ margin:0; padding:0} 等类似清楚浏览器样式代码则不用加8;2.Tween动画库.Back动画类型.easeOut缓冲类型(缓冲类型3种,动画类型10种,详细样式看上图效果说明);3.t起始时间;start起始位置;change变化量;d循环次数 4.为防止每次点击效果互相影响,每次调用前清定时器clearInterval(timer);5.slider.style.left后记得加px;动态效果如下
效果.gif
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML与CSS布局技巧（三）_html/css_WEB-ITnoseNext article：Spot.js