基于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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
如何使用repr调试python程序
2020/02/28 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
C语言面试题
2015/10/30 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
施工安全生产承诺书
2014/05/23 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
个人道歉信大全
2019/04/11 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
Python 中的Sympy详细使用
2021/08/07 Python