如何用tween.js实现导航条滑动_html/css_WEB-ITnose
导航条在大多数网站都有应用，今天我们用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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
