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
欢迎转载！但请带上文章地址^^
评论已关闭