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

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

Javascript 相关文章推荐
JavaScript中的prototype使用说明
Apr 13 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
javascript制作2048游戏
Mar 30 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
You might like
点击广告后才能获得下载地址
2006/10/26 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
vue-loader教程介绍
2017/06/14 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
python动态网页批量爬取
2016/02/14 Python
你应该知道的python列表去重方法
2017/01/17 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python实现的购物车功能示例
2018/02/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
成龙霸王洗发水广告词
2014/03/14 职场文书
爱心活动计划书
2014/04/26 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
入党自荐书范文
2015/03/05 职场文书
钢琴师观后感
2015/06/12 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书