jQuery循環(huán)（重點(diǎn)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循環(huán)</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*$('.list li').html('111').css({background:'pink'});*/
$('.list li').each(function (index) {
alert(index);
$(this).html(index);/*一瞬間，它是存不下來的*/
})/*each相當(dāng)于for循環(huán)*/
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
手風(fēng)琴
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>手風(fēng)琴</title>
? ? <style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#accordion li').click(function() {
$(this).animate(
{left: $(this).index()*21}
);
/*
錯(cuò)誤的索引用法
這里不能使用function(index)的索引，因?yàn)檠h(huán)會(huì)先執(zhí)行完，當(dāng)點(diǎn)擊事件執(zhí)行時(shí)，會(huì)導(dǎo)致索引值不對，所以還應(yīng)該使用已經(jīng)保存在this當(dāng)中的索引值
$(this).prevAll().each(function(index){
alert(index);
$(this).animate(
{left: index*21}
);
})
*/
/*要使用保存在$(this)里邊的索引值*/
// 當(dāng)前l(fā)i之前的所有兄弟li都往左移
// 由于每個(gè)li移動(dòng)的距離不同，使用each循環(huán)分別設(shè)置left值
$(this).prevAll().each(function(){
//要移動(dòng)的每一個(gè)元素
$(this).animate(
{left: $(this).index()*21}
);
})
// 當(dāng)前l(fā)i之后的所有兄弟li都往右移
$(this).nextAll().each(function(){
//要移動(dòng)的每一個(gè)元素
$(this).animate(
{left: 727-(5-$(this).index())*21}
);
})
});
})
</script>
</head>
<body>
? ? <div id="accordion">
? ? ? ? <ul>
? ? ? ? ? ? <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
? ? ? ? ? ? <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
? ? ? ? ? ? <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
? ? ? ? ? ? <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
? ? ? ? ? ? <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
? ? ? ? </ul>
? ? </div>
</body>
</html>
jQuery動(dòng)畫
jQuery動(dòng)畫只能修改帶有數(shù)字的動(dòng)畫，比如width，height等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery動(dòng)畫</title>
<style type="text/css">
.box{
background-color: #7aa1ef;
}
</style>
<script type="text/javascript" src="JS/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').animate({
width:200,
height:200
},1000,function () {
// alert('動(dòng)畫做完了')
$(this).animate({
marginLeft:500
},1000,function () {
$(this).animate({marginTop: 500}, 1000);
})
});
});
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
