百葉窗
思路
1.先給每一個li綁定mouseenter（或者mouseover）事件，我們優(yōu)先選用mouseenter件已，因為mouseover具有事件冒泡的特征笋额，而mouseenter沒有，較為方便篷扩。
2.然后當(dāng)你進(jìn)入li的時候通過改變li的left值兄猩。也就是當(dāng)你進(jìn)入當(dāng)前l(fā)i的時候改變前后li的left值，在當(dāng)前l(fā)i之前的里就是[0,60,120,180,240],之后里的值就是[ 0,560,620,680,740].
下面是html+css：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.shutter{
width: 800px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.shutter ul{
list-style: none;
}
.shutter ul li{
position: absolute;
top: 0;
}
.shutter ul li.no0{left: 0;}
.shutter ul li.no1{left: 160px;}
.shutter ul li.no2{left: 320px;}
.shutter ul li.no3{left: 480px;}
.shutter ul li.no4{left: 640px;}
</style>
</head>
<body>
<div class="shutter">
<ul>
<li class="no0">
<a href="">
</a>
</li>
<li class="no1">
<a href="">
</a>
</li>
<li class="no2">
<a href="">
</a>
</li>
<li class="no3">
<a href="">
</a>
</li>
<li class="no4">
<a href="">
</a>
</li>
</ul>
</div>
jQuery代碼：
//給每個li綁定移開事件mouseleave(不冒泡)
$("li").mouseleave(function() {
//函數(shù)截流鉴未，即在當(dāng)前動作完成之前不會進(jìn)入下一動作
$("li").stop(true);
//規(guī)定的每個li的位置
$(".no0").animate({"left": 0});
$(".no1").animate({"left": 120});
$(".no2").animate({"left": 240});
$(".no3").animate({"left": 360});
$(".no4").animate({"left": 480});
})
//給每個li綁定移入事件
$("li").mouseenter(function(){
//函數(shù)截流枢冤，即在當(dāng)前動作完成之前不會進(jìn)入下一動作
$("li").stop(true);
//獲取每個i的的下標(biāo)值
var i = $(this).index();
//當(dāng)前位置的前后li的left值
var left = [0,60,120,180,240]
var right = [0,560,620,680,740]
//遍歷所有的li
$("li").each(function(j){
//判斷 如果當(dāng)前l(fā)i的index值（i）>= j時
if (j <= i){
//那么當(dāng)前l(fā)i的左邊就是left[j]
$(this).animate({"left":left[j]})
}
else{
////否則當(dāng)前l(fā)i的右邊就是right[j]
$(this).animate({"left":right[j]})
}
})
})
頁面滾動
思路：
1.先引入插件<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>因為jQuery中沒有滾動事件。
2.然后我們給document綁定滾輪事件mousewheel（）铜秆，在得到e.deltaY的值淹真。當(dāng)值為負(fù)時，往下滾動连茧，反之核蘸，向上滾動。
3.然后在更新當(dāng)前頁面的高度啸驯。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
/* 給外層的body 添加隱藏*/
overflow: hidden;
}
#big {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.page {
position: relative;
width: 100%;
height: 100%;
background: green;
}
.page0 {
background: green;
}
.page1 {
background: yellow;
}
.page2 {
background: greenyellow;
}
.page3 {
background: orange;
}
.page4 {
background: gold;
}
</style>
</head>
<body>
<div id="big">
<!-- div.page*5 按TAB鍵
page page0 同時將 page 和 page0 作用在 div元素 中
-->
<div class="page page0">1</div>
<div class="page page1">2</div>
<div class="page page2">3</div>
<div class="page page3">4</div>
<div class="page page4">5</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<!-- jquery 沒有處理滾輪的事件客扎， 借助插件。 插件已經(jīng)處理了不同瀏覽器的兼容問題 -->
<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
<script>
var n = 0;
$(document).mousewheel(function(e){
//console.log(e.deltaY )
if ($("#big").is(":animated")) {
return
}
if (e.deltaY > 0) {
n--;
} else{
n++
}
//判斷n不能小于零或者大于四罚斗，否者滾輪會滾動到空白位置
if (n < 0) {
n = 0
}
if(n > 4){
n = 4
}
//保存body的高度值
var h = $("body").height();
//設(shè)置動畫讓最大的盒子big動一個-n * h
$("#big").animate({"top": -n * h})
})
</script>
