-
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]; } }查看全部
-
获取style样式的方法查看全部
-
运动框架实现思路查看全部
-
运动框架实现思路查看全部
-
运动框架实现思路查看全部
-
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]; } }查看全部
-
jQuery里已有的一个动画框架，与之前的js封装相似，还可以考虑使用css3的方法实现动画效果 $(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); }); }); });查看全部
-
代码框架查看全部
-
案例布局查看全部
-
json 格式 和 用法 json{a:12,b:13} 遍历用json用for-in格式 为了解决不能同时到达目标时取消定时器的问题，立了一个flag，然后通过是否有属性到达目标值，一旦有，则为false，则不会取消定时器，如果没有，则每次触发都为true，然后直接取消查看全部
-
js中json的用法查看全部
-
链式动画，在startMove(obj,attr,iTarget,fn)再加一个fn参数，并在清除动画之后，加入fn方法：if(fn){fn();} 在主页中，在三个参数之后再加入一个参数 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })查看全部
-
设置内联样式 obj.style.width=parseInt(obj.style.width)+speed+"px"; 使用函数获取属性 function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';查看全部
-
缓冲动画 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);查看全部
-
/*1.3精简参数, iTarget:偏移目标值 用当前offsetLeft的值与传入的目标值来判断增加和减少 */ function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer= setInterval(function(){ var speed=0; //如果当前值大于目标就是正向运动 if(oDiv.offsetLeft > iTarget){ speed=-10; }else{ //如果小于目标值就是反向运动 speed=10; }; if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); }查看全部
举报
0/150
提交
取消