基于jQuery实现图片推拉门动画效果的两种方法


Posted in jQuery onAugust 26, 2017

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

实现方法一:改变图片宽度

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>

jQuery精简后代码

//精简代码
$(function(){
  $('li').each(function(index, element){
    $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
  }).mouseenter(function(){
    $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
  }).mouseout(function(){
    $('li').stop().animate({width: 240});
  });
})

实现方法二:改变图片的偏移值

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函数,可以直接引入使用)。

总结

以上所述是小编给大家介绍的基于jQuery实现图片推拉门动画效果的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现全选按钮
Jan 01 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
jQuery Position方法使用和兼容性
Aug 23 #jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP反向代理类代码
2014/08/15 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python语言的优势是什么
2020/06/17 Python
python 获取字典键值对的实现
2020/11/12 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
运动会解说词100字
2014/01/31 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
滞留工资返还协议书
2014/10/19 职场文书
介绍信怎么写
2015/01/30 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
遗嘱范文
2015/08/07 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python