2013-06-12
Javascript 摆动运动
有时候匀速运动，缓冲运动已经无法满足现在挑剔的客户群了，今天，小郭写了一个摆动运动，大家相互学习下。
code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条摆动运动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
.wrapper{800px;margin:10px auto;}
ul{position:relative;600px;height:32px;overflow:hidden;_zoom:1;}
ul li{position:relative;float:left;100px;height:30px;border:1px solid #ccc;line-height:30px;text-align:center;cursor:pointer;}
ul li.bg{position:absolute;bottom:0;left:0px;100px;height:2px;overflow:hidden;background:red;}
#moveUL1{margin:100px;}
</style>
</head>
<body>
<div class="wrapper">
<ul id="moveUL">
<li>导航条1</li>
<li>导航条2</li>
<li>导航条3</li>
<li class="bg"></li>
</ul>
<ul id="moveUL1">
<li>导航条1</li>
<li>导航条2</li>
<li>导航条3</li>
<li class="bg"></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var friction = new Friction({
id:"moveUL", // 设置对象的id
type:"frictionMove", // 设置对象的运动类型。这里只设置了一个，以后会有缓冲运动，匀速运动等
modulus:0.7 // 设置摩擦系数，默认是0.7
})
var friction2 = new Friction({
id:"moveUL1",
type:"frictionMove",
modulus:0.7
})
}
function Friction(vArg){
this.id = getId(vArg.id); // 设置对象属性
this.dom = getDom("li",this.id);
this.type = vArg.type;
this.moveObj = this.dom[this.dom.length-1];
this.iSpeed = 0;
this.left = 0;
this.modulus = vArg.modulus || 0.7;
var _this = this;
for(var i=0;i<this.dom.length-1;i++){
this.dom[i].index = i;
this.dom[i].onmouseover = function(){
_this.frictionMove(_this.moveObj,this.offsetLeft);
}
}
}
Friction.prototype.frictionMove = function(obj,iTarget){ // 运动方法
var _this = this;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
_this.iSpeed +=(iTarget-obj.offsetLeft)/5;
_this.iSpeed *= _this.modulus;
_this.left +=_this.iSpeed;
if(Math.abs(_this.iSpeed)<1 && Math.abs(_this.left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget+"px";
}else{
obj.style.left = _this.left+"px";
}
},30);
}
function getId(id){
return document.getElementById(id);
}
function getDom(dom,obj){
var obj = obj || document;
return obj.getElementsByTagName(dom);
}
</script>
</body>
</html>