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]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
随机推荐
- spring 事务隔离级别配置
声明式的事务处理中,要配置一个切面,即一组方法,如 其中就用到了propagation,表示打算对这些方法怎么使用事务,是用还是不用,其中propagation有七种配置,REQUIRED.SUPPO ...
- ASP.NET Core Razor页面禁用防伪令牌验证
在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站: ...
- P1361 小M的作物
P1361 小M的作物 题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第 ...
- scss 编译方法
第一种: 手动创建 scss文件夹 用Node.js command promt 进入项目目录 在项目目录下面 输入 sass scss/main.scss css/main.css s ...
- Windows核心编程&内存管理
1. 每个进程都有自己的虚拟地址空间,对于32位机器而言,这个地址空间的大小为4GB(2^32 / 1024^3),这个虚拟地址空间只不过是一个内存地址空间, 为了能够正常读/写数据,我们还需要把物理 ...
- Linux指令--telnet
telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户 ...
- 流API--使用并行流
这篇博客一起来研究下使用并行流.借组多核处理器并行执行代码可以显著提高性能,但是并行编程可能十分复杂且容易出错,流API提供的好处之一是能够轻松可靠的并行执行一些操作.请求并行处理流,首先要获得一个并 ...
- 重定向stdin stdout stderr |
在Linux下,当一个用户进程被创建的时候,系统会自动为该进程创建三个数据 流,也就是题目中所提到的这三个.那么什么是数据流呢(stream)? 我们知道,一个程序要运行,需要有输入.输出,如果出错, ...
- spring mvc 中自定义404页面在IE中无法显示favicon.ico问题的解决方法。
此处用的是jsp,控制层用的是ModelAndView, 具体解决方法如下: @RequestMapping(value = "notfound", method = Reques ...
- Springboot security cas源码陶冶-ExceptionTranslationFilter
拦截关键的两个异常,对异常进行处理.主要应用异常则跳转至cas服务端登录页面 ExceptionTranslationFilter#doFilter-逻辑入口 具体操作逻辑如下 public void ...