码迷,mamicode.com
首页 > Web开发 > 详细

move.js框架

时间:2018-03-04 18:12:16      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:运动   interval   set   lte   art   color   etc   post   elastic   

 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 }

 

move.js框架

标签:运动   interval   set   lte   art   color   etc   post   elastic   

原文地址:https://www.cnblogs.com/a252336799/p/8505194.html

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