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>