编程 Javascript

jquery实现百叶窗效果

Posted in Javascript onJanuary 12, 2017

今天试着用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>
</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>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 });
})

当前图片能够愉快的玩耍了，接下来的重点就是其余图片怎么运动。

此时，我们可以把剩余的图片分成左右两部分，用jq 的 ":lt()" 和 ":gt()"方法写出剩余部分的效果。这里有一个小小的坑，自己也是绕了半天，最后还是别人提醒的才绕出来。

以当前图片左侧动画效果为例，最开始我是这么写的

<!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>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(“img:lt( idx )“).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

看上去没有什么错误，见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹，原因就是 $(“img:lt( idx )“) 这种写法，里面的idx已经不是变量了，所以无法获取当前的 idx 值，我们可以在外面定义一个变量，同时用 + 连接 lt 和变量 idx，再把变量引入进去即可。

因此更改后如下：

<!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>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
var imgL; 
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
  imgL = "img:lt(" + idx + ")"
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

这样奇迹就出现了~~ 同样的道理，右侧也是同样的方法。

最终代码如下：

<!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{
 width:280px;
 height:186px;
 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
//精简之后的方法
var lefts;
var idx;
var imgL; 
var imgR;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 imgL = "img:lt(" + idx + ")" //获取当前左侧的所有图片，如果直接用 $("img:lt(idx)")，idx会被当做字符串，获取不到对应的值
 imgR = "img:gt(" + idx + ")" //获取当前右侧的所有图片
 lefts = idx * 35;
 //当前图片的变化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 //左侧图片的变化
 $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 //右侧图片的变化
 $(imgR).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000)
 })
 });
})
$("img").each(function(){
 $(this).mouseleave(function(){
 $("img").each(function(){
 $(this).stop(true).animate({"left" : ($(this).index())*84}, 1000);
 })
 });
})
</script>
</body>
</html>

鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。

方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~

ps：图片不知道怎么加上来，稍后看下再改吧。欢迎各位加入交流学习前端群 466039913

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jquery实现百叶窗效果

- Author -

木风622

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery的message插件实现右下角弹出消息框

Jan 11 Javascript

chrome原生方法之数组

Nov 30 Javascript

JavaScript计算字符串中每个字符出现次数的小例子

Jul 02 Javascript

jQuery实现默认是闭合的FAQ展开效果菜单

Sep 14 Javascript

逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

Nov 04 Javascript

浅析JS异步加载进度条

May 05 Javascript

jQuery 获取跨域XML(RSS)数据的相关总结分析

May 18 Javascript

node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小

Jan 20 Javascript

浅谈键盘上回车按钮的js触发事件

Feb 13 Javascript

jQuery 实现左右两侧菜单添加、移除功能

Jan 02 jQuery

vue-router两种模式区别及使用注意事项详解

Aug 01 Javascript

Vue 刷新当前路由的实现代码

Sep 26 Javascript

基于JavaScript实现带缩略图的轮播效果

Jan 12 #Javascript

js通过指定下标或指定元素进行删除数组的实例

Jan 12 #Javascript

js仿搜狐视频记录片列表展示效果

May 30 #Javascript

原生js实现商品放大镜效果

Jan 12 #Javascript

JS 在数组指定位置插入/删除数据的方法

Jan 12 #Javascript

JS图片压缩（pc端和移动端都适用）

Jan 12 #Javascript

原生js实现淘宝购物车功能

Jun 23 #Javascript