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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
浅谈js中对象的使用
Aug 11 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
Rust中的Struct使用示例详解
Aug 14 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php图片裁剪函数
2018/10/31 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
文明班集体申报材料
2014/05/23 职场文书
公司年终奖分配方案
2014/06/16 职场文书
购房委托书
2014/10/15 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
医者仁心观后感
2015/06/17 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Nginx利用Logrotate实现日志分割
2022/05/20 Servers