登录 注册

同步课 / 相思湖学院 15级JS课程

刘秀梅

创建了 #相思湖学院 15级JS课程# 任务：

事件对象event属性的应用——随机星星效果 。
1.点击桌面任意地方，出现一个随机星星。点击桌面画出一个五角星形状。贴代码和截图。 2.点击桌面任意地方，出现三个随机星星，三个星星的位置分散。贴代码和截图。

2018-04-04 00:40
转发 评论
刘秀梅

创建了 #相思湖学院 15级JS课程# 任务：

图片自动切换、点击切换效果 。
1. 完成五张图片自动切换、点击左右箭头切换效果。 2. 使用 jQuery语法完成效果。 3. 理解 jQuery语法的选择器用法。 4. 掌握 jQuery方法调用的链式写法。 5. 提交代码（HTML/CSS/JS  注意格式）和 效果截图...

2018-04-04 00:40
转发 评论
刘秀梅

创建了 #相思湖学院 15级JS课程# 任务：

jQuery DOM节点操作 。
1.HTML/CSS 为左右两个可多选的下拉菜单，4个可点击的按钮; 2.点击每个按钮执行相应的功能； 3.使用jQuery语法完成，理解append()或appendTo()方法的功能； 4.提交代码(注意格式)和截图（.gif格式）

2018-04-04 00:40
转发 评论 1
刘秀梅

创建了 #相思湖学院 15级JS课程# 任务：

jQuery动画效果——手风琴效果 。
1. 理解并掌握jQuery自定义动画animate()的用法 2. 掌握手风琴的HTML/CSS布局 3. 理解并掌握手风琴效果的JS代码 4. 上交作业：HTML/CSS/JS代码, 效果截图(gif格式) 布局样式如下图：

2018-04-02 17:58
转发 评论 1
ITM1班宋少秋49 
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 2500px; background: url(images/bg.jpg) top left no-repeat; background-size: cover; position: relative; cursor: pointer; } img { position: absolute; } </style> </head> <body> </body> <script> function Star(src,x,y,width){ this.src = src; this.x = x; this.y = y; this.width = width; this.image = function(){ var img = new Image(); img.src = this.src; img.style.width = this.width + "px"; img.style.height = this.width + "px"; img.style.left = this.x + "px"; img.style.top = this.y + "px"; img.style.opacity = 1; document.body.appendChild(img); }; }; var arr = [ "images/subball1.png", "images/subball2.png", "images/subball3.png", "images/subball4.png", "images/subball5.png", "images/subball6.png", "images/subball7.png", "images/subball8.png" ]; document.body.onclick = function (event){ var src = arr[Math.floor(Math.random() * arr.length)]; var x = event.clientX - 5; var y = event.clientY + 5; var sign =(Math.random()<1)?0:1; var width = 100 + sign*50; var Image = new Star(src,x,y,width); Image.image(); }; </script> </html>
2018-01-14 23:38
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 800px;
        height: 405px;
        position: absolute;
        left: 500px;
        top: 100px;
        border: 5px red solid;
        overflow: hidden;
    }
    .pic>img{
        width: 538px;
        height: 405px;
        position: absolute;
    }
    #pic2{
        left: 400px;
    }
    #pic3{
        left: 500px;
    }
    #pic4{
        left: 600px;
    }
    #pic5{
        left: 700px;
    }
</style>
<body>
<div class="pic">
    <img src="img/4.jpg" id="pic1">
    <img src="img/1.jpg" id="pic2">
    <img src="img/2.jpg" id="pic3">
    <img src="img/5.jpg" id="pic4">
    <img src="img/3.jpg" id="pic5">
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
    $("#pic1").mouseenter(function () {
            $("#pic2").animate({left:"400px"})
                .next().animate({left:"500px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic2").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"500px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic3").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"200px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic4").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"200px"})
                .next().animate({left:"300px"})
                .next().animate({left:"700px"})
    });
    $("#pic5").mouseenter(function () {
            $("#pic2").animate({left:"100x"})
                .next().animate({left:"200px"})
                .next().animate({left:"300px"})
                .next().animate({left:"400px"})
    });
</script>
</body>
</html>
2018-01-14 19:09
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {float: left;}
        select {height: 200px;width: 100px;margin: 0; }
        p#submit {clear: left;}
    </style>
</head>
<body>
<form>
    <table>
        <tr>
            <td>&nbsp;</td>
            <td>
                <div>
                    <select id="leftSelect" multiple>
                        <option>选项1</option>
                        <option>选项2</option>
                        <option>选项3</option>
                        <option>选项4</option>
                        <option>选项5</option>
                    </select>
                </div>
                <div>
                    <input type="button" value="右移" onclick="moveRight();"/> <br/>
                    <input type="button" value="左移" onclick="moveLeft();"/> <br/>
                    <input type="button" value="全部右移" onclick="allToRight();"/> <br/>
                    <input type="button" value="全部左移" onclick="allToLeft();"/>
                </div>
                <div>
                    <select id="rightSelect" multiple>
                        <option>选项10</option>
                        <option>选项20</option>
                        <option>选项30</option>
                        <option>选项40</option>
                        <option>选项50</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="reset" id="reset" name="rePasswd" value="重设"/>
                <input id="submit" type="submit" value="提交"/></td>
        </tr>
    </table>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    //双向选择列表
    function moveRight() {
        //选中的项目右移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //右移
        for (var i = 0; i < left.children.length; ++i) {
            //遍历所有子结点
            var child = left.children[i];
            //获得当前孩子结点
            if ( child.selected) {
                right.appendChild(child);
                --i; //已经移过去了一项，则i值回减1
            }
        }
    }
//appendChild() 方法从一个元素向另一个元素中移动元素。

    function moveLeft() { //选中的项目左移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //左移
        for (var i = 0; i < right.children.length; ++i) { //遍历所有子结点
            var child = right.children[i]; //获得当前孩子结点
            if (child.selected) {
                left.appendChild(child);
                --i; //已经移过去了一项，则i值回减1
            }
        }
    }

    function allToRight() { //所有项目右移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //右移
        for (var i = 0; i < left.children.length; ++i) {//遍历所有子结点
            var child = left.children[i]; //获得当前孩子结点
            right.appendChild(child);
            --i; //已经移过去了一项，则i值回减1
        }
    }

    function allToLeft() { //所有项目左移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //左移
        for (var i = 0; i < right.children.length; ++i) { //遍历所有子结点
            var child = right.children[i]; //获得当前孩子结点
            left.appendChild(child);
            --i; //已经移过去了一项，则i值回减1
        }
    }
</script>
</body>
</html>
2018-01-14 19:08
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换作业</title>
    <style>
            *{padding:0;margin:0;}
            body>div
            {
                border:7px solid lightgrey;
                height:600px;
                width:600px;
                margin: 40px auto;
                position: relative;
            }
            div>p
            {
                display:inline-block;
                background-color:white;
                font-size:40px;
                font-weight:bold;
                color:black;
                position:absolute;
                padding:0 10px;
            }
            div>img{
                width:600px;
                height:600px;
                position: absolute;
            }
            #pre{
                left:0;
                top:50%;
            }
            #next{
                left:100%;
                margin-left:-41px;
                top:50%;
            }
    </style>
</head>
    <body>
        <div>
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <p id="pre"> < </p>
            <p id="next"> > </p>
        </div>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
            var img=1;
            $("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);
            var next=function ()
            {
                $("div>img:nth-child("+img+")").css("opacity",0);
                img++;
                if(img>5)
                {
                    img=1;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            var auto=setInterval(next,3000);
            var pre=function ()
            {
                $("div>img:nth-child("+now+")").css("opacity",0);
                img--;
                if(img<1)
                {
                    img=5;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            $("#next")[0].onclick=next;
            $("#pre")[0].onclick=pre;
        </script>
    </body>
</html>
2018-01-14 19:08
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 2500px;
            background: url(images/bg.jpg) top left no-repeat;
            background-size: cover;
            position: relative;
            cursor: pointer;
        }

        img {
            position: absolute;
        }
    </style>
</head>
<body>
</body>
<script>
    function Star(src,x,y,width){
        this.src = src;
        this.x = x;
        this.y = y;
        this.width = width;
        this.image = function(){
            var img = new Image();
            img.src = this.src;
            img.style.width = this.width + "px";
            img.style.height = this.width + "px";
            img.style.left = this.x + "px";
            img.style.top = this.y + "px";
            img.style.opacity = 1;
            document.body.appendChild(img);
        };
    };
    var arr = [
        "images/subball1.png",
        "images/subball2.png",
        "images/subball3.png",
        "images/subball4.png",
        "images/subball5.png",
        "images/subball6.png",
        "images/subball7.png",
        "images/subball8.png"
    ];
    document.body.onclick = function (event){
        var src = arr[Math.floor(Math.random() * arr.length)];
        var x = event.clientX - 5;
        var y = event.clientY + 5;
        var sign =(Math.random()<1)?0:1;
        var width = 100 + sign*50;
        var Image = new Star(src,x,y,width);
        Image.image();
    };
</script>
</html>
2018-01-14 19:07
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 800px;
        height: 405px;
        position: absolute;
        left: 500px;
        top: 100px;
        border: 5px red solid;
        overflow: hidden;
    }
    .pic>img{
        width: 538px;
        height: 405px;
        position: absolute;
    }
    #pic2{
        left: 400px;
    }
    #pic3{
        left: 500px;
    }
    #pic4{
        left: 600px;
    }
    #pic5{
        left: 700px;
    }
</style>
<body>
<div class="pic">
    <img src="img/4.jpg" id="pic1">
    <img src="img/1.jpg" id="pic2">
    <img src="img/2.jpg" id="pic3">
    <img src="img/5.jpg" id="pic4">
    <img src="img/3.jpg" id="pic5">
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
    $("#pic1").mouseenter(function () {
            $("#pic2").animate({left:"400px"})
                .next().animate({left:"500px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic2").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"500px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic3").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"200px"})
                .next().animate({left:"600px"})
                .next().animate({left:"700px"})
    });
    $("#pic4").mouseenter(function () {
            $("#pic2").animate({left:"100px"})
                .next().animate({left:"200px"})
                .next().animate({left:"300px"})
                .next().animate({left:"700px"})
    });
    $("#pic5").mouseenter(function () {
            $("#pic2").animate({left:"100x"})
                .next().animate({left:"200px"})
                .next().animate({left:"300px"})
                .next().animate({left:"400px"})
    });
</script>
</body>
</html>
2017-12-13 23:27
转发 评论
刘秀梅

关于第三次作业 “jQuery DOM节点操作”的问题：

1. 要求是使用jQuery 语法制作效果，一部分同学使用原生js代码

2. 个别同学上传代码格式不正确

3. gif图片格式，如果不会上传，请虚心请问会的同学

4. 作业要求上传代码和图片，不合格的同学看看是缺少哪个环节

2017-12-11 15:50
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {float: left;}
        select {height: 200px;width: 100px;margin: 0; }
        p#submit {clear: left;}
    </style>
</head>
<body>
<form>
    <table>
        <tr>
            <td>&nbsp;</td>
            <td>
                <div>
                    <select id="leftSelect" multiple>
                        <option>选项1</option>
                        <option>选项2</option>
                        <option>选项3</option>
                        <option>选项4</option>
                        <option>选项5</option>
                    </select>
                </div>
                <div>
                    <input type="button" value="右移" onclick="moveRight();"/> <br/>
                    <input type="button" value="左移" onclick="moveLeft();"/> <br/>
                    <input type="button" value="全部右移" onclick="allToRight();"/> <br/>
                    <input type="button" value="全部左移" onclick="allToLeft();"/>
                </div>
                <div>
                    <select id="rightSelect" multiple>
                        <option>选项10</option>
                        <option>选项20</option>
                        <option>选项30</option>
                        <option>选项40</option>
                        <option>选项50</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="reset" id="reset" name="rePasswd" value="重设"/>
                <input id="submit" type="submit" value="提交"/></td>
        </tr>
    </table>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    //双向选择列表
    function moveRight() {
        //选中的项目右移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //右移
        for (var i = 0; i < left.children.length; ++i) {
            //遍历所有子结点
            var child = left.children[i];
            //获得当前孩子结点
            if ( child.selected) {
                right.appendChild(child);
                --i; //已经移过去了一项，则i值回减1
            }
        }
    }
//appendChild() 方法从一个元素向另一个元素中移动元素。

    function moveLeft() { //选中的项目左移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //左移
        for (var i = 0; i < right.children.length; ++i) { //遍历所有子结点
            var child = right.children[i]; //获得当前孩子结点
            if (child.selected) {
                left.appendChild(child);
                --i; //已经移过去了一项，则i值回减1
            }
        }
    }

    function allToRight() { //所有项目右移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //右移
        for (var i = 0; i < left.children.length; ++i) {//遍历所有子结点
            var child = left.children[i]; //获得当前孩子结点
            right.appendChild(child);
            --i; //已经移过去了一项，则i值回减1
        }
    }

    function allToLeft() { //所有项目左移
        var left = $("leftSelect");
        var right = $("rightSelect");
        //左移
        for (var i = 0; i < right.children.length; ++i) { //遍历所有子结点
            var child = right.children[i]; //获得当前孩子结点
            left.appendChild(child);
            --i; //已经移过去了一项，则i值回减1
        }
    }
</script>
</body>
</html>
2017-12-08 23:38
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换作业</title>
    <style>
            *{padding:0;margin:0;}
            body>div
            {
                border:7px solid lightgrey;
                height:600px;
                width:600px;
                margin: 40px auto;
                position: relative;
            }
            div>p
            {
                display:inline-block;
                background-color:white;
                font-size:40px;
                font-weight:bold;
                color:black;
                position:absolute;
                padding:0 10px;
            }
            div>img{
                width:600px;
                height:600px;
                position: absolute;
            }
            #pre{
                left:0;
                top:50%;
            }
            #next{
                left:100%;
                margin-left:-41px;
                top:50%;
            }
    </style>
</head>
    <body>
        <div>
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <p id="pre"> < </p>
            <p id="next"> > </p>
        </div>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
            var img=1;
            $("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);
            var next=function ()
            {
                $("div>img:nth-child("+img+")").css("opacity",0);
                img++;
                if(img>5)
                {
                    img=1;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            var auto=setInterval(next,3000);
            var pre=function ()
            {
                $("div>img:nth-child("+now+")").css("opacity",0);
                img--;
                if(img<1)
                {
                    img=5;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            $("#next")[0].onclick=next;
            $("#pre")[0].onclick=pre;
        </script>
    </body>
</html>
2017-12-04 22:58
转发 评论
李巧妙_ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换作业</title>
    <style>
            *{padding:0;margin:0;}
            body>div
            {
                border:7px solid lightgrey;
                height:600px;
                width:600px;
                margin: 40px auto;
                position: relative;
            }
            div>p
            {
                display:inline-block;
                background-color:white;
                font-size:40px;
                font-weight:bold;
                color:black;
                position:absolute;
                padding:0 10px;
            }
            div>img{
                width:600px;
                height:600px;
                position: absolute;
            }
            #pre{
                left:0;
                top:50%;
            }
            #next{
                left:100%;
                margin-left:-41px;
                top:50%;
            }
    </style>
</head>
    <body>
        <div>
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <p id="pre"> < </p>
            <p id="next"> > </p>
        </div>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
            var img=1;
            $("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);
            var next=function ()
            {
                $("div>img:nth-child("+img+")").css("opacity",0);
                img++;
                if(img>5)
                {
                    img=1;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            var auto=setInterval(next,3000);
            var pre=function ()
            {
                $("div>img:nth-child("+now+")").css("opacity",0);
                img--;
                if(img<1)
                {
                    img=5;
                }
                $("div>img:nth-child("+img+")").css("opacity",1);
            }
            $("#next")[0].onclick=next;
            $("#pre")[0].onclick=pre;
        </script>
    </body>
</html>
2017-12-04 22:47
转发 评论
李巧妙_

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片切换作业</title>    <style>            *{padding:0;margin:0;}            body>div            {                border:7px solid lightgrey;                height:600px;                width:600px;                margin: 40px auto;                position: relative;            }            div>p            {                display:inline-block;                background-color:white;                font-size:40px;                font-weight:bold;                color:black;                position:absolute;                padding:0 10px;            }            div>img{                width:600px;                height:600px;                position: absolute;            }            #pre{                left:0;                top:50%;            }            #next{                left:100%;                margin-left:-41px;                top:50%;            }    </style></head>    <body>        <div>            <img src="img/1.jpg" alt="">            <img src="img/2.jpg" alt="">            <img src="img/3.jpg" alt="">            <img src="img/4.jpg" alt="">            <img src="img/5.jpg" alt="">            <p id="pre"> < </p>            <p id="next"> > </p>        </div>        <script src="js/jquery-3.2.1.js"></script>        <script>            var img=1;            $("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);            var next=function ()            {                $("div>img:nth-child("+img+")").css("opacity",0);                img++;                if(img>5)                {                    img=1;                }                $("div>img:nth-child("+img+")").css("opacity",1);            }            var auto=setInterval(next,3000);            var pre=function ()            {                $("div>img:nth-child("+now+")").css("opacity",0);                img--;                if(img<1)                {                    img=5;                }                $("div>img:nth-child("+img+")").css("opacity",1);            }            $("#next")[0].onclick=next;            $("#pre")[0].onclick=pre;        </script>    </body>

</html>

2017-12-04 22:46
转发 评论
itm1 覃庆辉42 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 2500px;
            background: url(images/bg.jpg) top left no-repeat;
            background-size: cover;
            position: relative;
            cursor: pointer;
        }

        img {
            position: absolute;
        }
    </style>
</head>
<body>
</body>
<script>
    function Star(src,x,y,width){
        this.src = src;
        this.x = x;
        this.y = y;
        this.width = width;
        this.image = function(){
            var img = new Image();
            img.src = this.src;
            img.style.width = this.width + "px";
            img.style.height = this.width + "px";
            img.style.left = this.x + "px";
            img.style.top = this.y + "px";
            img.style.opacity = 1;
            document.body.appendChild(img);
        };
    };
    var arr = [
        "images/subball1.png",
        "images/subball2.png",
        "images/subball3.png",
        "images/subball4.png",
        "images/subball5.png",
        "images/subball6.png",
        "images/subball7.png",
        "images/subball8.png"
    ];
    document.body.onclick = function (event){
        var src = arr[Math.floor(Math.random() * arr.length)];
        var x = event.clientX - 5;
        var y = event.clientY + 5;
        var sign =(Math.random()<1)?0:1;
        var width = 100 + sign*50;
        var Image = new Star(src,x,y,width);
        Image.image();
    };
</script>
</html>
2017-11-28 22:50
转发 评论
许钟月

<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 600px; background: url(images/bg.jpg) top left no-repeat; background-size: cover; position: relative; cursor: pointer; } img { position: absolute; } </style> </head> <body> <script> function Star(src,x,y,width){ this.src = src; this.x = x; this.y = y; this.width = width; this.image = function(){ var img = new Image(); img.src = this.src; img.style.width = this.width+"px"; img.style.height = this.width+"px" ; img.style.left = this.x+"px" ; img.style.top = this.y+"px" ; img.style.opacity = 1; document.body.appendChild(img); var num = 0; var flag1 = (Math.random()<0.3)?-1:1; var flag2 = (Math.random()<0.3)?-1:1; var pathX = flag1 *Math.random()*3; var pathY = flag2 *Math.random()*3; var time =setInterval(function (){ img.style.left = img.offsetLeft+pathX+"px"; img.style.top=img.offsetTop+pathY+"px"; num++; if(num>10){ clearInterval(time); } },50); } } var arr=[ "images/subball1.png", "images/subball2.png", "images/subball3.png", "images/subball4.png", "images/subball5.png", "images/subball6.png", "images/subball7.png", "images/subball8.png" ]; document.body.onclick = function(event){ var src = arr[Math.floor(Math.random()*arr.length)]; var x =event.clientX - 5; var y=event.clientY+5; var sign = (Math.random()<0.5)?0:1; var width = 20+sign* 10; var image=new Star(src,x,y,width); image.image(); }; document.body.onclick = function(event){ for(var i=0;i<3;i++){ var src = arr[Math.floor(Math.random()*arr.length)]; var x =event.clientX -5; var y =event.clientY +5; var sign=(Math.random()<0.5)?0:1; var width=20+sign*10; var Image=new Star(src,x,y,width); Image.image(); } }; </script> </body> <cml>

2017-11-28 17:04
转发 评论
课程任务
课程学员
ITM1班彰-24
ITM2 潘海林17
ITM2班-苏琪06
ITM2班熊宏杰26
ITM2-覃春莹-7
ITM2李盛华46
ITM2班李家明23
ITM1班-林林17
ITM2班黄明虹38