滑动的导航条
Posted damocless
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滑动的导航条相关的知识，希望对你有一定的参考价值。
opacity属性设置不透明级别
filter(滤镜) 属性
left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
onmouseover:在鼠标指针移动到元素上时触发
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：myVar = setInterval("javascript 函数", milliseconds);
obj.offsetLeft: 获取的是相对于父对象的左边距;
obj.style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距
相同点：
如果父元素的position定义为relative,子元素的position定义为absolute，那么子元素的obj.style.left的值是相对于父div的值，obj.offsetLeft值也是这样。
不同点：
obj.style.left 返回的是字符串（如50px），obj.offsetLeft返回的是数值（如50）
obj.style.left是读写的，obj.offsetLeft是只读的
obj.style.left的值需要事先定义，否则取到的值为空。而且必须要定义在标签中
obj.offsetLeft在IE7下存在兼容性，而obj.style.left在IE7下没有。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动的导航条</title>
<style type="text/css">
#ul{
width: 360px;
height: 40px;
margin: 30px auto;
position: relative; /*其设置的relative与后面定义的js的obj.style.left是相对应的如果父元素的position定义为relative,子元素的position定义为absolute，那么子元素的obj.style.left的值是相对于父div的值，obj.offsetLeft值也是这样。*/
background: #eee;
padding: 0;
border-radius: 10px;
}
#ul li{
width: 80px;
height: 25px;
margin: 5px 5px;
padding: 0;
line-height: 25px;
list-style: none;
float: left;
text-align: center;
cursor:pointer;
}
#ul li.mli{
position: absolute;
width: 80px;
height: 25px;
background: red;
left: 0;
top:0;
opacity:0.5;
filter:alpha(opacity=50);
border-radius: 10px
}
</style>
<script src="move.js"></script>
<script type="text/javascript">
//导航条原理：利用加速和减速，加速越跑越快，减速会到减速到speed等于0就返回。模拟摩擦力:将speed*=0.7，最后ispeed等于0；
/*先定义一个框，然后在js中编写if语句对条件进行判断然后将其像素进行移动*/
window.onload=function(){
var oUl=document.getElementById(‘ul‘);
var aLi=oUl.getElementsByTagName(‘li‘);
var iSpeed=0;
var iLeft=0;
var timer=null;
for(i=0;i<aLi.length-1;i++){//运动的那个li不遍历
aLi[i].onmouseover=function(){
tMove(aLi[aLi.length-1],this.offsetLeft)
}
}
function tMove(obj,iTarget){
clearInterval(timer);
timer=setInterval(function(){
iSpeed+=(iTarget-obj.offsetLeft)/5;//速度公式
iSpeed*=0.7;//模拟摩擦力
iLeft+=iSpeed;
/*速度足够小 当前位置足够接近目标位置 停止计数器 则执行*/
if(Math.abs(iSpeed<1)&&Math.abs(obj.offsetLeft<1)){
clearInterval(timer);
obj.style.left=iTarget+‘px‘;/*因为obj.style.left返回的是字符串（50px），而obj.offsetLeft(50)*/
}else{
obj.style.left=iLeft+‘px‘;
}
},30) /*每30ms 执行一次函数*/
}
}
</script>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>个人介绍</li>
<li>客服中心</li>
<li>娱乐天地</li>
<li class="mli"></li>
</ul>
</body>
</htm
以上是关于滑动的导航条的主要内容，如果未能解决你的问题，请参考以下文章