JS实现图片''推拉门''效果
JS实现图片''推拉门''效果
''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。
推拉门收缩状态.png
"推拉门"展开状态.png
"推拉门"实现方法一：改变图片宽度
html+css代码
1 <body>
2 <div class="box">
3 <ul>
4 <!-- <li></li> -->
5 <li></li>
6 <li></li>
7 <li></li>
8 <li></li>
9 <li></li>
10 </ul>
11 </div>
12 </body>
13
14 <style>
15 *{
16 padding: 0;
17 margin: 0;
18
19 }
20 .box{
21 /*收缩状态:缩放时每个图片的大小240px 所以总大小1200px*/
22 /*展开状态:当前图片宽度800px 其他图片宽度100px*/
23 width: 1200px;
24 height: 500px;
25 border:1px solid red;
26 margin: 50px auto;
27 }
28 .box ul{
29 list-style: none;
30 width: 1210px;
31 }
32 /*设置每一张图片的大小和float: left*/
33 .box ul li{
34 width: 240px;
35 height: 500px;
36 /*background: url(images/slidepic2.jpg);*/
37 float: left;
38 }
39 </style>
jQuery实现
1 <script src = 'jquery-3.2.1.js'></script>
2 <script>
3 $(function(){
4 //1遍历每一张li 获取每个元素设置对应的图片
5 var lis = $('li');
6 lis.each(function(index, element){
7 //通过设置背景图片名称改变图片的显示
8 var imgName = "images/slidepic" + (index + 2) +".jpg ";
9 $(element).css('background', "url('"+ imgName +"')")
10 });
11 //2.展开状态
12 //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
13 lis.mouseenter(function(){
14 // console.log(this); 当前的li DOM元素
15 //当前的图片的宽度变为800
16 $(this).stop().animate({width: 800});
17 //其他图片的宽度变为100
18 $(this).siblings('li').stop().animate({width: 100});
19 });
20 //3鼠标滑出是全部显示为收缩状态
21 lis.mouseout(function(){
22 lis.stop().animate({width: 240});
23 });
24 })
25 </script>
"推拉门"实现方法二：改变图片的偏移值
html+css代码
1 <body>
2 <div class="picList">
3 <ul>
4 <li></li>
5 <li></li>
6 <li></li>
7 <li></li>
8 <li></li>
9 </ul>
10 </div>
11 </body>
12
13 <style>
14 *{
15 background-color: #aaa;
16 padding: 0;
17 margin: 0;
18 }
19 ul{list-style: none;}
20
21 .picList{
22 width: 1000px;
23 height: 400px;
24 /*border:1px solid #eee;*/
25 margin:100px auto;
26 position: relative;
27 overflow: hidden;
28 }
29 /*设置定位属性 所有图片覆盖在起始位置*/
30 .picList ul li{
31 position: absolute;
32 width: 1000px;
33 height: 400px;
34 top: 0;
35 }
36 img{
37 width: 100%;
38 height: 400px;
39 cursor: pointer;
40
41 }
42 </style>
jQuery实现
1 <script src = 'jquery-3.2.1.js'></script>
2 <script >
3 $(function(){
4 //1获取所有的图片 设置初始的收缩状态left:i*200
5 var lis = $('li');
6 for(var i = 0; i < lis.length; i++){
7 lis.eq(i).css({left:i*200 + 'px' });
8 }
9 //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
10 lis.hover(function(){
11 var index = $(this).index(); //DOM对象转换jQuery对象
12 //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
13 for(var j = 0; j <= index; j++){
14 lis.eq(j).stop().animate({left: j*100 + 'px'},300);
15 }
16 //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
17 for(var j = index + 1; j < lis.length; j++){
18 lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
19 }
20 },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
21 for(var i = 0; i < lis.length; i++){
22 lis.eq(i).stop().animate({left: i*200 + 'px'},300);
23 }
24 });
25 })
26 </script>
注意：方法一在实现的过程中，注意宽度和图片命名的设置。
提示：这里使用的是jQuery代码实现，javaScript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数（前面的笔记有封装好的animate函数，可以直接引入使用）。
JS实现图片''推拉门''效果的更多相关文章
- js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...
- 3月题外：关于JS实现图片缩略图效果的一些小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- JS中图片飞飞效果
当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...
- 3月题外：关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- js实现图片幻灯片效果
其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- js简单 图片版时钟，带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
随机推荐
- mysql中能够使用索引的典型场景
mysql 演示数据库:http://downloads.mysql.com/docs/sakila-db.zip 匹配全值 explain select * from rental where re ...
- sass和compass实战 读书笔记（一）
sass优势: 不做重复的工作 一 消除样式表冗余(通过变量赋值的方式) 1. 通过变量来复用属性值 2. 使用嵌套来快速写出多层级的选择器 3. 通过混合器来复用一段样式 4. 使用选择器继承来避 ...
- TypeError: 'encoding' is an invalid keyword argument for this function
python 2.7 问题 data_file = open("F:\\MyPro\\data.yaml", "r", encoding='utf-8') 运行 ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- Log4j源码解析--LoggerRepository和Configurator解析
本文转自上善若水的博客,原文出处:http://www.blogjava.net/DLevin/archive/2012/07/10/382678.html.感谢作者的无私分享. LoggerRepo ...
- junit4X系列--Builder、Request与JUnitCore
原文出处:http://www.blogjava.net/DLevin/archive/2012/05/12/377957.html.感谢作者的无私分享. 初次用文字的方式记录读源码的过程,不知道怎么 ...
- 定时任务schedule(spring boot )
1. 定时任务实现方式:SpringBoot自带的Scheduled,可以将它看成一个轻量级的Quartz,而且使用起来比Quartz简单许多,本文主要介绍. 执行方式:单线程(串行)多线程(并行) ...
- java的优势解读
1. java确定每种基本类型所占存储空间的大小.它们的大小不会像大多数语言那样随机器硬件架构的变化而变化.这种所占存储空间大小的不变性是java程序比用其他大多数语言编写的程序更具有可移植性的原因之 ...
- 如何让oracle DB、监听和oem开机启动(dbstart)
如何让oracle DB.监听和oem开机启动(dbstart) 让oracle DB.监听和oem开机启动(dbstart) Oracle提供了伴随操作系统自动重启的功能,在Windows中,可以修 ...
- 机器学习00：如何通过Python入门机器学习
我们都知道机器学习是一门综合性极强的研究课题,对数学知识要求很高.因此,对于非学术研究专业的程序员,如果希望能入门机器学习,最好的方向还是从实践触发. 我了解到Python的生态对入门机器学习很有帮助 ...