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]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
随机推荐
- CUDA与OpenGL互操作
当处理较大数据量的时候,往往会用GPU进行运算,比如OpenGL或者CUDA.在实际的操作中,往往CUDA实现并行计算会比OpenGL更加方便,而OpenGL在进行后期渲染更具有优势.由于CUDA中的 ...
- python_如何使用临时文件
案例: 某项目中,从传感器中获得采集数据,每收集到1G的数据后做是数据分析,最终只保留数据分析的结果,收集到的数据放在内存中,将会消耗大量内存,我们希望把这些数据放到一个临时的文件中 临时文件不能命名 ...
- ECLIPS-S测井系统下的仪器挂接 [TCC模块]
1. 环境 HPUX版本:11.23 Complete Image ECLIPS版本:Rel 5.1i 2. 效果图 3. 用途 为以后在此系统中挂接新仪器打下坚实的基础. 4. 参考资料 ECLIP ...
- ImmutableMap
不可变集合,为什么使用它呢?线程安全\更有效的利用内存\可作为常量 ImmutableMap.<String, Object> builder().put("yananList& ...
- AM调制的FPGA实现
一.说明: 功能:AM调制 平台:Vivado 2016.4 和 Matlab R2017a 二.原理: 1. AM调制原理 AM已调信号的时域表达式: 已调信号的频域表达式: 本质上AM调制就是频谱 ...
- Angular之ngRoute与uiRoute
ngRoute不支持嵌套路由 用法如下: <!DOCTYPE html> <html lang="en" ng-app="myApp"> ...
- Struts2中拦截器的使用与配置
一,拦截器是什么? 拦截器是在Action执行之前和之后执行的代码,是一个类似于过滤器的类: 二,拦截器的作用 拦截器拦截Action的请求,在Action之前或之后实现某项功能: 三,拦截器的特点 ...
- Jetson TX2安装固态硬盘（原创）
SSD on Jetson TX2 注意事项:在断电情况下,将固态硬盘的接线与Jetson TX2进行连接 步骤: 一.jetson tx2开机,打开搜索栏中的Disks 二.Disks显示画面 三. ...
- Spring MVC执行的流程
1.Spring MVC应用的开发步骤 a.在web.xml文件中定义前端控制器DispatcherServlet来拦截用户请求.由于Web应用是基于请求/响应架构的应用,所以 不管哪个MVC Web ...
- JAVA并发编程学习笔记------线程的三种创建方式
创建线程一般有如下几个方式: 1. 通过继承Thread类来创建一个线程: /** * 步骤1:定义一个继承Thread类的子类 * 步骤2:构造子类的一个对象 * 步骤3:启动线程: * */ pu ...