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]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
随机推荐
- ios - 如何获取app上的数据
做过ios开发的人应该都用过Charles,通常叫它花瓶.Charles是Mac下常用的对网络流量进行分析的工具,类似于Windows下的Fiddler.在开发iOS程序的时候,往往需要调试客户端和服 ...
- HEXO+Github,搭建属于自己的博客
摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_us ...
- java学习总结之文件操作--ByteArrayOutputStream的用法
ByteArrayOutputStream类是在创建它的实例时,程序内部创建一个byte型别数组的缓冲区, 然后利用ByteArrayOutputStream和ByteArrayInputStream ...
- 开源三维地球GIS引擎Cesium常用功能的开发
Cesium是一个非常优秀的三维地球GIS引擎(开源且免费).能够加载各种符合标准的地图图层,瓦片图.矢量图等都支持.支持3DMax等建模软件生成的obj文件,支持通用的GIS计算:支持DEM高程图. ...
- Laravel的unique和exists验证规则的优化
本文是Laravel实战:任务管理系统(一)的扩展阅读 原文链接:http://pilishen.com/posts/Improvements-to-the-Laravel-unique-and-ex ...
- JSP之JSTL_functions
<?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java ...
- diffMerge安装配置使用
概述: 在用git进行源代码版本维护的时候,常常会进行各代码版本之前区别的查看,例如在每次提交改动前进行git diff 可以看到源文件代码相对相应版本或是远程仓库的改动情况,如果有冲突还需要进行me ...
- java常用类--系统相关
java提供了System类和Runtime类来与程序的运行平台进行交互. System类 System类代表java程序的运行平台,程序不能创建这个类的对象,System类提供了一些类field和方 ...
- JDK自带的Timer类
Timer类负责设定TimerTask的起始和间隔执行时间.具体的执行任务,由用户创建一个TimerTask的继承类,并实现其run()方法 timer.schedule()
- Elasticsearch 全教程--入门
1.1 初识 Elasticsearch 是一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎,可以说 Lucene 是当今最先进,最高效的全功能开源搜索引擎框架. 但是 L ...