jQuery写百叶窗和和页面滚动
2017-10-24 本文已影响0人
杨赛舟
百叶窗
思路
1.先给每一个li绑定mouseenter（或者mouseover）事件，我们优先选用mouseenter，因为mouseover具有事件冒泡的特征，而mouseenter没有，较为方便。
2.然后当你进入li的时候通过改变li的left值。也就是当你进入当前li的时候改变前后li的left值，在当前li之前的里就是[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() {
//函数截流，即在当前动作完成之前不会进入下一动作
$("li").stop(true);
//规定的每个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(){
//函数截流，即在当前动作完成之前不会进入下一动作
$("li").stop(true);
//获取每个i的的下标值
var i = $(this).index();
//当前位置的前后li的left值
var left = [0,60,120,180,240]
var right = [0,560,620,680,740]
//遍历所有的li
$("li").each(function(j){
//判断 如果当前li的index值（i）>= j时
if (j <= i){
//那么当前li的左边就是left[j]
$(this).animate({"left":left[j]})
}
else{
////否则当前li的右边就是right[j]
$(this).animate({"left":right[j]})
}
})
})
页面滚动
思路：
1.先引入插件<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>因为jQuery中没有滚动事件。
2.然后我们给document绑定滚轮事件mousewheel（），在得到e.deltaY的值。当值为负时，往下滚动，反之，向上滚动。
3.然后在更新当前页面的高度。
代码如下：
<!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 没有处理滚轮的事件， 借助插件。 插件已经处理了不同浏览器的兼容问题 -->
<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();
//设置动画让最大的盒子big动一个-n * h
$("#big").animate({"top": -n * h})
})
</script>
