百叶窗（shutter）实例制作。
参考效果来源： 明星_瑞丽网
百叶窗.gif
设计思路：
- 最大的盒子 shutter 高等于图片高，宽为 900px，图片宽高分别为 600px 500px，900/600=150，可知道图片间隙为150px。
- 认识到图片滑动回家，每一次都会回到自己的老家，并不会每次都改变位置。而且第一个图片永远不会动。
- 计算运动的 left 新家（新位置）方法，shutter减去一个展开图片宽，除以图片总数减一。例子中为 900-600=300,300/(6-1)=60。
总结一下 其实就是 shutter 盒子里面存了六个图片，盒子宽除以图片个数，即可绝对定位出静态页面。当鼠标运动时，只有一张图片张开。所以用 shutter 减去一张图片宽再除以剩下图片个数。观察 GIF 可知大于鼠标碰到图片位置的图片，右移，小于等图片位置的左移。
注意：mouseenter 与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。
演示 mouseenter() 与 mouseover() 之间的不同。
1.原始代码实现百叶窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百叶窗</title>
<style>
* {
margin: 0;
padding: 0;
}
.shutter {
height: 500px;
width: 900px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.shutter ul {
list-style: none;
}
.shutter ul li {
position: absolute;
top: 0;
}
.shutter ul li.num01 {left: 0;}
.shutter ul li.num02 {left: 150px;}
.shutter ul li.num03 {left: 300px;}
.shutter ul li.num04 {left: 450px;}
.shutter ul li.num05 {left: 600px;}
.shutter ul li.num06 {left: 750px;}
</style>
</head>
<body>
<div class="shutter">
<ul>
<li class = "num01"><a href=""><img src="images/shutter/rayli01.png" alt=""></a></li>
<li class = "num02"><a href=""><img src="images/shutter/rayli02.jpg" alt=""></a></li>
<li class = "num03"><a href=""><img src="images/shutter/rayli03.jpg" alt=""></a></li>
<li class = "num04"><a href=""><img src="images/shutter/rayli04.jpg" alt=""></a></li>
<li class = "num05"><a href=""><img src="images/shutter/rayli05.jpg" alt=""></a></li>
<li class = "num06"><a href=""><img src="images/shutter/rayli06.jpg" alt=""></a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(".num01").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 600},1000);
$(".num03").animate({"left" : 660},1000);
$(".num04").animate({"left" : 720},1000);
$(".num05").animate({"left" : 780},1000);
$(".num06").animate({"left" : 840},1000);
});
$(".num02").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 60},1000);
$(".num03").animate({"left" : 660},1000);
$(".num04").animate({"left" : 720},1000);
$(".num05").animate({"left" : 780},1000);
$(".num06").animate({"left" : 840},1000);
});
$(".num03").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 60},1000);
$(".num03").animate({"left" : 120},1000);
$(".num04").animate({"left" : 720},1000);
$(".num05").animate({"left" : 780},1000);
$(".num06").animate({"left" : 840},1000);
});
$(".num04").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 60},1000);
$(".num03").animate({"left" : 120},1000);
$(".num04").animate({"left" : 180},1000);
$(".num05").animate({"left" : 780},1000);
$(".num06").animate({"left" : 840},1000);
});
$(".num05").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 60},1000);
$(".num03").animate({"left" : 120},1000);
$(".num04").animate({"left" : 180},1000);
$(".num05").animate({"left" : 240},1000);
$(".num06").animate({"left" : 840},1000);
});
$(".num06").mouseover(function(){
$("li").stop(true);
$(".num02").animate({"left" : 60},1000);
$(".num03").animate({"left" : 120},1000);
$(".num04").animate({"left" : 180},1000);
$(".num05").animate({"left" : 240},1000);
$(".num06").animate({"left" : 300},1000);
});
$("li").mouseleave(function(){
$(".num02").animate({"left" : 150},1000);
$(".num03").animate({"left" : 300},1000);
$(".num04").animate({"left" : 450},1000);
$(".num05").animate({"left" : 600},1000);
$(".num06").animate({"left" : 750},1000);
});
</script>
</body>
</html>
2.代码的优化
改进动画改变时的写法。
var $lis = $("li");
$lis.mouseenter(function(){
$lis.stop(true); //节流
index = $(this).index(); //鼠标感应到的图片编号
$lis.each(function(i){
if(i <= index){ //，判断图片在左还是在右。比较图片的左右绝对定位图片位置
$(this).animate({"left":60*i},1000);
}else{
$(this).animate({"left":600+(i-1)*60},1000);
}
});
});
$lis.mouseleave(function(){
$lis.each(function(i){
$(this).animate({'left' :150*i},1000);
});
});
上面的 if else 语句可用三元运算符代写。
(i <= index?$(this).animate({"left":60*i},1000); : $(this).animate({"left":600+(i-1)*60},1000);
3.增加 opacity 透明度
百叶窗透明度.gif
感应到的图片变亮，未感应到的图片变暗。
如果我们直接设置图片的 opacity 为 0.5。所有的图片将会变成下面的效果。
opacity
解决的办法： 在 li 里面放个盒子，通过改变盒子的透明度来修改图片的展示效果。
<li class = "num01"><div class="bgc"></div><a href=""><img src="images/shutter/rayli01.png" alt=""></a></li> //放入div.bgc
======设置样式======
.shutter ul li .bgc {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #4b4b4b;
opacity: 0.5;
}
========$lis.mouseenter(function(){里面放入改变opacity}========
$(this).children(".bgc").animate({"opacity" : 0},1);
=========离开恢复原样式==========
$lis.mouseleave(function(){
$lis.each(function(i){
$(this).animate({'left' :150*i},1000);
});
$lis.children(".bgc").fadeTo(1,0.5);
});
});
注意：改变动画可以用 animate 或 fadeTo。
网友评论