首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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公告滚动+AJAX后台得到数据
Apr 14 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js Date概念详细介绍
Nov 22 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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
instantclient(1) pt-archiver(1) muduo(1) 存储过程(3) EventBus(1) 忘记密码(1) B+树(2) ICF-5900W(2) Fragment(1) TcpServer(1)
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
zf框架db类的分页示例分享
2014/03/14 PHP
php解析json数据实例
2014/08/19 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python实现的井字棋（Tic Tac Toe）游戏示例
2018/01/31 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python根据指定日期计算后n天，前n天是哪一天的方法
2018/05/29 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python实现滑雪游戏
2020/02/22 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国最大的奢侈品零售网络商城：Flannels
2016/09/16 全球购物
Dillard’s百货官网：Dillards.com
2018/05/26 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
学生安全责任书范本
2014/07/24 职场文书
民用住房租房协议书
2014/10/29 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python