基于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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现获取多选框的值示例
Feb 07 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
写一个用户在线显示的程序
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
srcElement表格样式
2006/09/03 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
通过cmd进入python的实例操作
2019/06/26 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python实现滑雪者小游戏
2020/02/22 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
商务英语专业毕业生自荐信
2013/11/05 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
SpringBoot集成Redis的思路详解
2021/10/16 Redis