jquery实现百叶窗效果实现百叶窗效果
本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~
最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会
失真了,后来经过学习,发现原来原理很简单:
基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过
left值控制位置);然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也
进行相应的改变。
文字描述起来很难懂的样子,先上html和css布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width: 420px;
height: 186px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
margin: 100px auto;
}
img{
border: none;
display: block;
position: absolute;
top: 0;
}
img:nth-of-type(1){
left: 0;
}
img:nth-of-type(2){
left: 84px;
}
img:nth-of-type(3){
left: 168px;
}
img:nth-of-type(4){
left: 252px;
}
img:nth-of-type(5){
left: 336px;
}
</style>
<div class="box">
<img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
<img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg">
<img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
</body>
</html>
布局很简单,接下来就是jq控制各个图片相对位置的变化了。
起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;
鼠标经过时候:经过的那张图片完全显示,即占据宽度280px(图片的宽度是280px),剩余的宽度是 (盒子宽度-280px)/
剩余的图片数量,根据所得值确定各个图片的终止位置,left值;
感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>