JS实现图片手风琴效果


Posted in Javascript onApril 17, 2020

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。

JS实现图片手风琴效果

推拉门收缩状态.png

JS实现图片手风琴效果

"推拉门"展开状态.png

"推拉门"实现方法一:改变图片宽度

html+css代码

<body>
 <div class="box">
 <ul>
  <!-- <li>![](images/slidepic2.jpg)</li> -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
</body>

<style>
 *{
  padding: 0;
  margin: 0;

 }
 .box{
  /*收缩状态:缩放时每个图片的大小240px 所以总大小1200px*/
  /*展开状态:当前图片宽度800px 其他图片宽度100px*/
  width: 1200px;
  height: 500px;
  border:1px solid red;
  margin: 50px auto;
 }
 .box ul{
  list-style: none;
  width: 1210px;
 }
 /*设置每一张图片的大小和float: left*/
 .box ul li{
  width: 240px;
  height: 500px;
  /*background: url(images/slidepic2.jpg);*/
  float: left;
 }
 </style>

jQuery实现 

<script src = 'jquery-3.2.1.js'></script>
<script>
 $(function(){
 //1遍历每一张li 获取每个元素设置对应的图片
 var lis = $('li');
 lis.each(function(index, element){
  //通过设置背景图片名称改变图片的显示
  var imgName = "images/slidepic" + (index + 2) +".jpg ";
  $(element).css('background', "url('"+ imgName +"')")
 });
 //2.展开状态
 //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
 lis.mouseenter(function(){
  // console.log(this); 当前的li DOM元素
  //当前的图片的宽度变为800
  $(this).stop().animate({width: 800});
  //其他图片的宽度变为100
  $(this).siblings('li').stop().animate({width: 100});
 });
 //3鼠标滑出是全部显示为收缩状态
 lis.mouseout(function(){
  lis.stop().animate({width: 240});
 });
 })
</script>

"推拉门"实现方法二:改变图片的偏移值

html+css代码

<body>
 <div class="picList">
 <ul>
  <li>![](images/slidepic8.jpg)</li>
  <li>![](images/slidepic3.jpg)</li>
  <li>![](images/slidepic4.jpg)</li>
  <li>![](images/slidepic5.jpg)</li>
  <li>![](images/slidepic7.jpg)</li>
 </ul>
 </div>
</body>

<style>
 *{
  background-color: #aaa;
  padding: 0;
  margin: 0;
 }
 ul{list-style: none;}

 .picList{
  width: 1000px;
  height: 400px;
  /*border:1px solid #eee;*/
  margin:100px auto;
  position: relative;
  overflow: hidden;
 }
 /*设置定位属性 所有图片覆盖在起始位置*/
 .picList ul li{
  position: absolute;
  width: 1000px;
  height: 400px;
  top: 0;
 }
 img{
  width: 100%;
  height: 400px;
  cursor: pointer;

 }
</style>

jQuery实现

<script src = 'jquery-3.2.1.js'></script>
<script >
 $(function(){
 //1获取所有的图片 设置初始的收缩状态left:i*200
 var lis = $('li');
 for(var i = 0; i < lis.length; i++){
  lis.eq(i).css({left:i*200 + 'px' });
 }
 //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
 lis.hover(function(){
  var index = $(this).index(); //DOM对象转换jQuery对象
  //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
  for(var j = 0; j <= index; j++){
  lis.eq(j).stop().animate({left: j*100 + 'px'},300);
  }
  //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
  for(var j = index + 1; j < lis.length; j++){
  lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
  }
 },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
  for(var i = 0; i < lis.length; i++){
  lis.eq(i).stop().animate({left: i*200 + 'px'},300);
  }
 });
 })
</script>

注意:方法一在实现的过程中,注意宽度和图片命名的设置。

提示:这里使用的是jQuery代码实现,javaScript代码也是一样的可以实现,只是修改下遍历过程和内置函数方法,另外再重写动画函数(前面的笔记有封装好的animate函数,可以直接引入使用)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
js 省地市级联选择
Feb 07 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
详解jquery和vue对比
Apr 16 jQuery
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 #Javascript
vue.js路由跳转详解
Aug 28 #Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
BootStrap入门学习第一篇
Aug 28 #Javascript
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
javascript简易画板开发
2020/04/12 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
js异步编程小技巧详解
2017/08/14 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
查看django版本的方法分享
2018/05/14 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android