抓住小程序风口_纯JS完成弹性导航条效果

纯JS实现弹性导航条效果       本文主要介绍了纯JS实现弹性导航条效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

 !doctype html 
 html 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
*{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto; position:relative;}
ul li{ float:left; width:80px; height:40px; text-align:center; line-height:40px; border:1px solid #000; position:relative; z-index:2;}
#block_box{ position:absolute; top:0; left:0; background:#399; z-index:1;}
 /style 
 script 
var left = 0;
var iSpeed = 0;
function move(obj,iTarget){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 iSpeed+=(iTarget-left)/5;
 iSpeed*=0.75;
 left+=iSpeed;
 obj.style.left = left+'px';
 if(Math.round(iSpeed)==0 Math.round(left)==iTarget){
 clearInterval(obj.timer);
 },30);
window.onload = function(){
 var aLi = document.getElementsByTagName('li');
 var oBlock = document.getElementById('block_box');
 var iNow = 0;
 for(var i=0;i aLi.length-1;i++){
 ;(function(index){
 aLi[i].onmouseover = function(){
 //oBlock.style.left = index*aLi[0].offsetWidth+'px';
 move(oBlock,index*aLi[0].offsetWidth);
 aLi[i].onmouseout = function(){
 //oBlock.style.left = 0;
 move(oBlock,iNow*aLi[0].offsetWidth);
 aLi[i].onclick = function(){
 iNow=index;
 })(i);
 /script 
 /head 
 body 
 li 首页 /li 
 li CSS课程 /li 
 li JS课程 /li 
 li HTML5课程 /li 
 li 视频教程 /li 
 li 课程案例 /li 
 li 联系方式 /li 
 li id="block_box" /li 
 /ul 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


相关阅读