jquery实现百叶窗效果(利用li的定位)
更新时间：2021年10月19日 15:15:40 作者：weixin_43700362
这篇文章主要为大家详细介绍了jquery实现百叶窗效果，利用li的定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现百叶窗效果的具体代码，供大家参考，具体内容如下
大概思路：
一个div（宽度为800px），里面包含ul和li，li的宽高分别设置为560px，300px（li里的图片也是这个宽高）。li设置绝对定位，div设置相对定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不动画的时候，每个li宽高为160px。（800/5=160 div的宽度/图片个数）
动画的时候，被鼠标进入的li宽高为560px，300px，把图片完全显示出来。其他未被鼠标进入的图片，宽度为（800-560）/4=160px
当鼠标出去box框的话，各个图片回复最初的位置。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding:0;
overflow: hidden;
}
.box{
width:800px;
height:300px;
border:5px solid gray;
margin:100px auto;
position: relative;
}
li{
list-style: none;
float: left;
position:absolute;
/*width:160px;*/
height:300px;
width:560px;
}
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
img{
width:560px;
height:300px;
}
</style>
<body>
<div class="box">
<ul>
<li class="no0"> <img src="img/0.jpg" alt=""> </li>
<li class="no1"> <img src="img/1.jpg" alt=""> </li>
<li class="no2"> <img src="img/2.jpg" alt=""> </li>
<li class="no3"> <img src="img/3.jpg" alt=""> </li>
<li class="no4"> <img src="img/4.jpg" alt=""> </li>
</ul>
</div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>
// 最初的位置 0 160 320 480 640
// 最左边的位置 0 60 120 180 240
//最右边位置：0 560 620 680 740
$lis = $("li");
//当鼠标进入图1的时候，图1到图4往右边动画
$lis.eq(0).mouseenter(function(){
$lis.stop(true);
$lis.eq(1).animate({left:560},1000);
$lis.eq(2).animate({left:620},1000);
$lis.eq(3).animate({left:680},1000);
$lis.eq(4).animate({left:740},1000);
});
//当鼠标进入图2的时候，图2往左边动画，图3到图4往右边动画
$lis.eq(1).mouseenter(function(){
$lis.stop(true);
$lis.eq(1).animate({left:60},1000);
$lis.eq(2).animate({left:620},1000);
$lis.eq(3).animate({left:680},1000);
$lis.eq(4).animate({left:740},1000);
});
$lis.eq(2).mouseenter(function(){
$lis.stop(true);
$lis.eq(1).animate({left:60},1000);
$lis.eq(2).animate({left:120},1000);
$lis.eq(3).animate({left:680},1000);
$lis.eq(4).animate({left:740},1000);
});
$lis.eq(3).mouseenter(function(){
$lis.stop(true);
$lis.eq(1).animate({left:60},1000);
$lis.eq(2).animate({left:120},1000);
$lis.eq(3).animate({left:180},1000);
$lis.eq(4).animate({left:740},1000);
});
$lis.eq(4).mouseenter(function(){
$lis.stop(true);
$lis.eq(1).animate({left:60},1000);
$lis.eq(2).animate({left:120},1000);
$lis.eq(3).animate({left:180},1000);
$lis.eq(4).animate({left:240},1000);
});
//鼠标离开box的时候，各个图片返回原来的位置
$(".box").mouseleave(function(){
$lis.stop(true);
$lis.eq(1).animate({left:160},1000);
$lis.eq(2).animate({left:320},1000);
$lis.eq(3).animate({left:480},1000);
$lis.eq(4).animate({left:640},1000);
})
</script>
</body>
</html>
运行结果：
代码简化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding:0;
overflow: hidden;
}
.box{
width:800px;
height:300px;
border:5px solid gray;
margin:100px auto;
position: relative;
}
li{
list-style: none;
float: left;
position:absolute;
width:560px;
height:300px;
}
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
img{
width:560px;
height:300px;
}
</style>
<body>
<div class="box">
<ul>
<li class="no0"> <img src="img/0.jpg" alt=""> </li>
<li class="no1"> <img src="img/1.jpg" alt=""> </li>
<li class="no2"> <img src="img/2.jpg" alt=""> </li>
<li class="no3"> <img src="img/3.jpg" alt=""> </li>
<li class="no4"> <img src="img/4.jpg" alt=""> </li>
</ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 最初的位置 0 160 320 480 640
// 最左边的位置 0 60 120 180 240
//最右边位置：0 560 620 680 740
$lis = $("li");
$lis.mouseenter(function(){
$lis.stop(true);
console.log( $(this).index());
var index = $(this).index();
// 当图片在被鼠标进入图片的左侧的时候，往左边动画。在右边是，往右边动画
$lis.each(function(i){
if(i <= index){
$(this).animate({left:60*i},1000);
}else{
$(this).animate({left:560+60*(i-1)},1000);
}
})
})
//鼠标离开box的时候，各个图片返回原来的位置
$(".box").mouseleave(function(){
$lis.stop(true);
$lis.each( function(i){
$(this).animate({left:160*i},1000);
});
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
![jQuery结合PHP+MySQL实现二级联动下拉列表[实例]](//img.jbzj.com/images/xgimg/bcimg0.png)
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
二级联动的实现方法还真不少，实用性也很强，这里结合一个学生信息表的实例，来分享一下我的实现过程2011-11-11
这篇文章主要介绍了jquery绑定事件 bind和on的用法与区别,结合实例形式分析了jquery绑定事件 bind和on的基本功能、用法、区别与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery制作可自定义大小的拼图游戏的代码，非常的简单实用，虽然还只是局限于数字顺序的拼图，后续慢慢完善上图片，但还是分享给大家，有需要的小伙伴可以参考下。2015-03-03
今天想做一个用$.ajax()从xml中读取数据的这么一个异步交互过程2010-11-11
这篇文章主要介绍了jQuery EasyUI之DataGrid使用实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了jquery实现经典的淡入淡出选项卡效果代码,通过简单的jQuery鼠标事件及链式操作实现淡入淡出效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery中DOM树操作之复制元素的方法,实例分析了DOM树复制元素的使用技巧,需要的朋友可以参考下2015-01-01
js制作的鼠标悬浮时产生的下拉框效果，需要的朋友可以参考下2012-10-10
这篇文章主要介绍了jQuery实现将页面上HTML标签换成另外标签的方法,实例说明了两种实现html页面元素替换的技巧,需要的朋友可以参考下2015-06-06
jquery.cookie.js实现用户登录保存密码功能的方法
这篇文章主要介绍了jquery.cookie.js实现用户登录保存密码功能的方法,结合实例形式详细分析了jquery.cookie.js插件操作cookie实现保存用户登录信息的相关技巧,需要的朋友可以参考下2016-04-04
![jQuery结合PHP+MySQL实现二级联动下拉列表[实例]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论