首页 > Javascript > javascript实现渐变拉伸特效

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

欢迎转载!但请带上文章地址^^

标签:拉伸 js特效

评论已关闭