码迷,mamicode.com
首页 > 其他好文 > 详细

滑动的导航条

时间:2019-10-28 20:56:16      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:条件   一个   second   外边距   导航   meta   The   over   line   

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

滑动的导航条

标签:条件   一个   second   外边距   导航   meta   The   over   line   

原文地址:https://www.cnblogs.com/Damocless/p/11755151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!