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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
javascript hashtable实现代码
Oct 13 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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 xp下安装pear
2006/12/02 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
js单词形式的运算符
2014/05/06 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python 实现归并排序算法
2012/06/05 Python
Python代理抓取并验证使用多线程实现
2013/05/03 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python for循环与range函数的使用详解
2019/03/23 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
经理职责范文
2013/11/08 职场文书
工程部经理岗位职责
2013/12/08 职场文书
企业宗旨标语
2014/06/10 职场文书
三好学生竞选稿
2015/11/21 职场文书