相思湖学院 15级JS课程 -

相思湖学院 15级JS课程

2017-11-22 18:20

请先登录。

itm1 覃庆辉42

提交了相思湖学院 15级JS课程任务事件对象event属性的应用——随机星星效果的任务作业。

ITM1班梁瑞珏38

提交了相思湖学院 15级JS课程任务事件对象event属性的应用——随机星星效果的任务作业。

ITM1班梁瑞珏38

提交了相思湖学院 15级JS课程任务 jQuery DOM节点操作的任务作业。

ITM2班韦淞俊14

提交了相思湖学院 15级JS课程任务 jQuery DOM节点操作的任务作业。

ITM1班王一庄08

提交了相思湖学院 15级JS课程任务 jQuery DOM节点操作的任务作业。

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>

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>

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>

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>

ITM2班黄圣哲21

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班陈柯31

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班欧畅28

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

15ITM2班周昌勇

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1 班陆坤26

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班王志波07

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班韦淞俊14

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班梁瑞珏38

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班许祖铭49

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班罗淋元53

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2李盛华46

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班王一庄08

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

itm1 赖静波

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1-曾焱橙53

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班梁洋19

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM2班黄王相20

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

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>

ITM2班-苏琪06

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1高继良46

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班易世满13

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

ITM1班陈浩程09

提交了相思湖学院 15级JS课程任务 jQuery动画效果——手风琴效果的任务作业。

上一页 1 2 3 4 5 6 … 13 14 下一页