基于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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
深入php 正则表达式的学习探讨
2013/06/06 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php解析url的三个示例
2014/01/20 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python合并多个excel文件的示例
2020/09/23 Python
python 爬取小说并下载的示例
2020/12/07 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
ORACLE十问
2015/04/20 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
优秀村官事迹材料
2014/01/10 职场文书
十佳党员事迹材料
2014/08/28 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android