提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript抖动元素的小例子

JavaScript 元素 例子 抖动
2023-06-13 09:15:07 时间

复制代码代码如下:


 <!doctypehtml>
 <htmllang="zh">
 <head>
    <metacharset="utf-8">
    <title>xxxxxx</title>
    <style>

    #control{
        height:100px;
        width:100%;
        background:gray;
    }

    </style>
    <script>
    functionshake(e,onComplete,distance,interval)
    {
        if(typeofe==="string")
        {
            e=document.getElementById(e);
        }//endif
        distance=distance||8;
        interval=interval||800;

        varoriginalStyle=e.style.cssText;
        e.style.position="relative";
        varstart=(newDate()).getTime();

        animate();

        functionanimate()
        {
            varnow=(newDate()).getTime();
            varelapsed=now-start;
            varprogress=elapsed/interval;
            if(progress<1)
            {
                vary=distance*Math.sin(Math.PI*progress*4);
                varx=distance*Math.cos(Math.PI*progress*4);
                e.style.left=x+"px";
                e.style.top=y+"px";
                console.log(e.style.cssText);
                setTimeout(animate,Math.min(25,elapsed));
            }//endif
            else
            {
                e.style.cssText=originalStyle;
                if(onComplete)
                {
                    onComplete(e);
                }//endif

            }//endelse

        }//endanimate()

    }//endshake()

    </script>
 </head>
 <body>

    <divid="control"onclick="shake(this);">
    </div>

 </div>

 </body>
 </html>

相关文章