摆动运动
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{width:800px;margin:10px auto;}
ul{position:relative;width:600px;height:32px;overflow:hidden;_zoom:1;}
ul li{position:relative;float:left;width:100px;height:30px;border:1px solid #ccc;line-height:30px;text-align:center;cursor:pointer;}
ul li.bg{position:absolute;bottom:0;left:0px;width: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>
?
?
?
?
轉載于:https://www.cnblogs.com/xiuciedward/archive/2013/06/12/js.html
總結
- 上一篇： Android获取手机型号,系统版本,A
- 下一篇： sogo输入法