jQuery(二)

jQuery学完了!好用!

1.用定时器做的jquery里面的animate效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器实现ANIMATE效果</title>
    <style type="text/css">
    div{
        width:100px;
        height:100px;
        background-color: #f00;
        position: absolute;
        left:100px;
        top:100px;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        var x = 100;
        var timer = setInterval(startMove, 100);
        function startMove(){
            $("div").attr("style","width:"+x+"px;height:"+x+"px;left:"+x+"px;top:"+x+"px");
            x++;
        }
        $("button").click(function(){
            clearInterval(timer);
        })
        $("input").click(function() {
            timer = setInterval(startMove, 100);
        });
    });
    </script>
</head>
<body>
<input type="button" value="变大">
<button>Stop</button>
<div>大! <font size="3">大!</font> <font size="5">大!</font></div>    
</body>
</html>

2.全选/反选/取消/删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选/反选/取消/删除功能</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        //全选功能
        $("#all").click(function(){
            $(":checkbox").prop("checked",true);
        })
        //取消功能
        $("#none").bind(
            "click",function(){
                $(":checkbox").prop("checked",false);
        })
        //反选功能
        $("#opposite").click(function(){
            for(var i=0; i<$(":checkbox").length; i++){
                $($(":checkbox")[i]).prop("checked",!$($(":checkbox")[i]).prop('checked'));
            }
        })
        //删除功能
        $("#del").click(function(){
            $(":checked").parents("tr").remove();
        })    
    });

    </script>
</head>
<body>
<table width='600' align='center' border='1'>
    <tr>
        <td>序号</td>
        <td>名字</td>
        <td>类型</td>
        <td>选择</td>
    </tr>
    <tr>
        <td>101</td>
        <td>越狱</td>
        <td>剧情</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr>
        <td>102</td>
        <td>The Vampire Diary</td>
        <td>科幻</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr>
        <td>103</td>
        <td>冰与火之歌</td>
        <td>奇幻</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr align='right'>
        <td colspan='4'>
            <input type="button" id='all' value='全选'>
            <input type="button" id="none" value='取消'>
            <input type="button" id="opposite" value='反选'>
            <input type="button" id="del" value='删除'>
        </td>
    </tr>
</table>
</body>
</html>

3.我想我是太无聊了...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我想我是太无聊了...</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    var x = 600, y = 200, m = 600, n=200;
    $(function(){
        $("img").css({
            "width":"100px",
            "height":"140px",
            "position":"absolute",
            "left":"600px",
            "top":"200px"
        })
        window.setTimeout(left1, 1)
        window.setTimeout(up1, 1)
        window.setTimeout(right1, 1)
        window.setTimeout(down1, 1)
    })
    function left1(){
        setInterval(startLeft1, 20)
    }
    function startLeft1(){
        $("#left1").css({
            "left":--x + "px",
        })
        if(x<=400){x=600;}
    }
    function up1(){
        setInterval(startUp1, 20)
    }
    function startUp1(){
        $("#up1").css({
            "top":--y + "px",
        })
        if(y<=0){y=200;}
    }
    function right1(){
        setInterval(startRight1, 20)
    }
    function startRight1(){
        $("#right1").css({
            "left":++m + "px",
        })
        if(m>=800){m=600;}
    }
        function down1(){
        setInterval(startDown1, 20)
    }
    function startDown1(){
        $("#down1").css({
            "top":++n + "px",
        })
        if(n>=400){n=200;}
    }    
    </script>
</head>
<body>
<img src="html/images/1.jpg" id="left1">    
<img src="html/images/2.jpg" id="up1">    
<img src="html/images/3.jpg" id="right1">    
<img src="html/images/4.jpg" id="down1">            
<img src="html/images/6.jpg">            
</body>
</html>

 

posted @ 2016-12-16 22:43  panbee  阅读(194)  评论(0)  编辑  收藏  举报