-
运动效果的框架 function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取当前的值 var icur=null; // 如果设置的属性为『透明度』... if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } // 2、算速度 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); // 3、检测停止 if(icur!=json[attr]){ flag = false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
获取样式： div.offsetWidth获得的是width+border+padding的值， clientWidth获得的事width+padding的指，获得宽度时不是元素的实际宽，改变时会出错。 故需编写一个获取样式的函数getStyle(obj,attr) obj为被获取样式的元素，attr为要获取的样式查看全部
-
对象获取样式方法 getStyle(obj,attrty)查看全部
-
多物体运动时，不能共用同一个定时器或同一个变量，会造成争抢导致错误。 应该给每个物体单独定义定时器及变量，调用函数时设置当前物体的定时器和变量。查看全部
-
function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取当前的值 var icur=null; // 如果设置的属性为『透明度』... if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } // 2、算速度 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); // 3、检测停止 if(icur!=json[attr]){ flag = false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
缓冲动画 1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断(防止出错!必不可少) speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
透明度动画：基于速度动画 alpha=30; ie下透明度范围为0-100：box.style.filter = 'alpha(opacity:'+alpha+')'; 其他浏览器下范围为0-1：box.style.opacity = alpha/100; 设速度值（即透明度递增/减值），速度值的正负与当前透明度和目标透明度大小相关。 当前透明度>目标透明度，速度值为负 当前透明度<目标透明度，速度值为正 每一次调用函数前，需clearInterval()把前一次的定时器清除。查看全部
-
运动框架实现思路查看全部
-
$(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });查看全部
-
timer = setInterval(function(){ },30) 每隔30秒执行一次函数function()查看全部
-
var timer = null; clearInterval(timer);查看全部
-
先清除定时器查看全部
-
move.js function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style[attr]=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
举报
0/150
提交
取消