前端jQuery3D动态特效

前端代码开发工具免费
html5前端开发工具 拖拽
谷歌浏览器的前端开发工具

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>线性</title>
</head>
<style>
</style>
<script src=”//cdn.bootcss.com/jquery/3.1.1/jquery.js”></script>
<body>
    <button id=”btn”>click</button>
    <script>
        var timer;
        var flag = false;
        $(document).ready(function () {
            function run() {
                timer = setInterval(function () {
                    var oDiv = document.createElement(“div”);
                    //横向
                    $(oDiv).css({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border”: “1px solid #000”,
                        “border-radius”: “50px”,
                        “position”: “absolute”,
                        “left”: “0px”,
                        “top”: “300px”
                    });
                    $(oDiv).animate({
                        “width”: “0px”,
                        “height”: “0px”,
                        “border-radius”: “0px”,
                        “left”: “200px”,
                        “top”: “350px”
                    }, 5000, function () {
                        oDiv.parentNode.removeChild(oDiv);
                    });
                    var oDiv1 = document.createElement(“div”);
                    $(oDiv1).css({
                        “width”: “0”,
                        “height”: “0”,
                        “border”: “1px solid #000”,
                        “position”: “absolute”,
                        “left”: “200px”,
                        “top”: “350px”
                    }).delay(5000);
                    $(oDiv1).animate({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border-radius”: “50px”,
                        “left”: “300px”,
                        “top”: “300px”
                    }, 5000, function () {
                        oDiv1.parentNode.removeChild(oDiv1)
                    }).delay(5000);
                    var oDiv2 = document.createElement(“div”);
                    $(oDiv2).css({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border”: “1px solid #000”,
                        “border-radius”: “50px”,
                        “position”: “absolute”,
                        “left”: “300px”,
                        “top”: “300px”
                    }).delay(10000);
                    $(oDiv2).animate({
                        “width”: “0px”,
                        “height”: “0px”,
                        “border-radius”: “0px”,
                        “left”: “500px”,
                        “top”: “350px”
                    }, 5000, function () {
                        oDiv2.parentNode.removeChild(oDiv2)
                    }).delay(10000);
                    var oDiv3 = document.createElement(“div”);
                    $(oDiv3).css({
                        “width”: “0”,
                        “height”: “0”,
                        “border”: “1px solid #000”,
                        “position”: “absolute”,
                        “left”: “500px”,
                        “top”: “350px”
                    }).delay(15000);
                    $(oDiv3).animate({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border-radius”: “50px”,
                        “left”: “600px”,
                        “top”: “300px”
                    }, 5000, function () {
                        oDiv3.parentNode.removeChild(oDiv3)
                    }).delay(15000);
                    //纵向
                    var oDiv4 = document.createElement(“div”);
                    $(oDiv4).css({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border”: “1px solid #000”,
                        “border-radius”: “50px”,
                        “position”: “absolute”,
                        “left”: “300px”,
                        “top”: “0px”
                    });
                    $(oDiv4).animate({
                        “width”: “0px”,
                        “height”: “0px”,
                        “border-radius”: “0px”,
                        “left”: “350px”,
                        “top”: “200px”
                    }, 5000, function () {
                        oDiv4.parentNode.removeChild(oDiv4);
                    });
                    var oDiv5 = document.createElement(“div”);
                    $(oDiv5).css({
                        “width”: “0”,
                        “height”: “0”,
                        “border”: “1px solid #000”,
                        “position”: “absolute”,
                        “left”: “350px”,
                        “top”: “200px”
                    }).delay(5000);
                    $(oDiv5).animate({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border-radius”: “50px”,
                        “left”: “300px”,
                        “top”: “300px”
                    }, 5000, function () {
                        oDiv5.parentNode.removeChild(oDiv5)
                    }).delay(5000);
                    var oDiv6 = document.createElement(“div”);
                    $(oDiv6).css({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border”: “1px solid #000”,
                        “border-radius”: “50px”,
                        “position”: “absolute”,
                        “left”: “300px”,
                        “top”: “300px”
                    }).delay(10000);
                    $(oDiv6).animate({
                        “width”: “0px”,
                        “height”: “0px”,
                        “border-radius”: “0px”,
                        “left”: “350px”,
                        “top”: “500px”
                    }, 5000, function () {
                        oDiv6.parentNode.removeChild(oDiv6)
                    }).delay(10000);
                    var oDiv7 = document.createElement(“div”);
                    $(oDiv7).css({
                        “width”: “0”,
                        “height”: “0”,
                        “border”: “1px solid #000”,
                        “position”: “absolute”,
                        “left”: “350px”,
                        “top”: “500px”
                    }).delay(15000);
                    $(oDiv7).animate({
                        “width”: “100px”,
                        “height”: “100px”,
                        “border-radius”: “50px”,
                        “left”: “300px”,
                        “top”: “600px”
                    }, 5000, function () {
                        oDiv7.parentNode.removeChild(oDiv7)
                    }).delay(15000);
                    $(document.body).append(oDiv);
                    $(document.body).append(oDiv1);
                    $(document.body).append(oDiv2);
                    $(document.body).append(oDiv3);
                    $(document.body).append(oDiv4);
                    $(document.body).append(oDiv5);
                    $(document.body).append(oDiv6);
                    $(document.body).append(oDiv7);
                }, 200)
            }
            $(“#btn”).click(function () {
                if (flag) {
                    clearInterval(timer);
                    flag = false;
                } else {
                    run();
                    flag = true;
                }
            })
        })
    </script>
</body>
</html>
wps前端开发工具
前端界面开发工具
前端h5游戏开发工具
» 本文来自:前端开发者 » 《前端jQuery3D动态特效》
» 本文链接地址:https://www.rokub.com/6220.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!