move.js框架

 1 function getByClass(oParent,cName){
 2 var elements = document.getElementsByTagName('*');
 3 var i = 0;
 4 var results = [];
 5 for(var i=0;i<elements.length;i++){
 6 if(elements[i].className == cName){
 7 results.push(elements[i]);
 8 }
 9 }
10 return results;
11 }
12 function $(id){
13 return document.getElementById(id);
14 }
15 function getStyle(obj,attr){
16 if(obj.currentStyle){
17 return obj.currentStyle[attr];
18 }else{
19 return getComputedStyle(obj,false)[attr];
20 }
21 }
22 function startMove(obj,json,fn){ //width:300 height:300 opacity:50
23 
24 clearInterval(obj.timer);
25 
26 obj.timer = setInterval(function(){
27 var flag = true;
28 //一个都能不能少,都等着
29 for(var attr in json){
30 if(attr=='opacity'){
31 var icurrent = parseInt(parseFloat(getStyle(obj,attr))*100);
32 }else{
33 var icurrent = parseInt(getStyle(obj,attr));
34 }
35 var speed = (json[attr] - icurrent)/8;
36 
37 speed = speed>0?Math.ceil(speed):Math.floor(speed);
38 
39 //只要任何一个还没到,修改状态,让width height  opacity继续运动
40 if(icurrent != json[attr]){
41 flag = false;
42 }
43 if(attr=='opacity'){
44 obj.style.filter = "alpha(opacity:"+(icurrent+speed)+")";
45 obj.style.opacity = (icurrent+speed)/100;
46 }else{
47 obj.style[attr] = icurrent+speed+'px';
48 }
49 }
50 //只判断只要还有一个人没到咱就等 width  height  opacity都停止的
51 if(flag){
52 clearInterval(obj.timer);
53 //alert('我到了,不用担心');
54 if(fn){
55 fn();
56 }
57 }
58 }, 30)  
59 }
60 
61 
62 //弹性运动框架
63 function elasticMove(obj,target){
64 var speed = 0;
65 clearInterval(obj.timer);
66 //刚开始还没有运动,这里也不会出差
67 obj.timer = setInterval(function(){
68 speed += (target-obj.offsetTop)/3; 
69 speed *= 0.75;
70 
71 if(Math.abs(speed)<1 && Math.abs(target-obj.offsetTop)<1){
72 clearInterval(obj.timer);
73 }else{
74 obj.style.top = obj.offsetTop + speed +'px';
75 }
76 document.title = 'target:'+target+'speed'+speed;
77 
78 }, 30)
79 }
原文地址:https://www.cnblogs.com/a252336799/p/8505194.html