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>