javascript实现渐变拉伸特效
有时候为了实现某个特效而引入jquery实在太不值当了,很多特效可以自己实现。例如,下面这段代码可以实现渐变拉伸div。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js渐变代码</title> </head> <body> <div id="div1" style="width:100px; height:100px; background: blue;"> </div> <script type="text/javascript"> window.onload=function() { var oDiv=document.getElementById("div1"); move(oDiv,300,"height"); } function move(obj,iTarget,attr){ var iSpeed=0; var iCur=0; timer=setInterval(function(){ /*物体的实时位置*/ iCur=parseInt(getStyle(obj,attr)); /*速度*/ if(!(iCur==iTarget)){ iSpeed=Math.ceil((iTarget-iCur)/5); console.log(iSpeed); } /*停止条件*/ if(iCur>=iTarget){ clearInterval(timer); }else{ obj.style[attr]=iCur+iSpeed+"px"; } console.log(iCur); },30) } function getStyle(obj,attr){ if(obj.currentStyle) { return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script> </body> </html>
这段js代码功能是每隔30ms对div1的高度像目标高度(300px)进行增加。
if(!(iCur==iTarget))判断当前高度和目标高度不相等时就会计算此时需要给div1增加的高度(iSpeed);
如果你打印出iSpeed的值你会发现到后面的循环全是增加1px,也就只要div的初始高度小于等于300px,总会有一个时刻增加到300px。
一旦达到300px之后便会触发clearInterval停止执行。虽然此时div1的高度就是300px,在最后一次setInterval中的iCur==300。
教程地址:http://blog.zhengshuiguang.com/js/js-stretch.html
欢迎转载!但请带上文章地址^^
评论已关闭