JS实现图片手风琴效果
作者：阿详 时间：2023-08-23 19:28:27
''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。
推拉门收缩状态.png
"推拉门"展开状态.png
"推拉门"实现方法一：改变图片宽度
html+css代码
<body>
<div class="box">
<ul>
<!-- <li></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></li>
<li></li>
<li></li>
<li></li>
<li></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函数，可以直接引入使用）。
来源：http://www.cnblogs.com/axiangcheng/archive/2017/08/28/7443275.html
标签：js,手风琴
0
投稿猜你喜欢
Python实现感知器模型、两层神经网络
2021-11-14 07:34:19
Mysql查询以某"字符串"开头的查询方式
2024-01-24 21:05:19
PyTorch一小时掌握之迁移学习篇
2021-12-13 12:37:11
python logging模块的使用详解
2023-06-08 08:43:34
浅析Python requests 模块
2023-04-28 17:45:18
MySQL 回表,覆盖索引,索引下推
2024-01-21 12:56:59
地图可视化神器kepler.gl python接口的使用方法
2022-05-07 00:10:57
python程序 创建多线程过程详解
2022-04-02 04:02:21
Python二叉搜索树与双向链表转换实现方法
2022-08-23 12:46:34
pycharm自动生成文件注释和函数注释
2023-10-07 04:17:18
浅谈 Webpack 如何处理图片(开发、打包、优化)
2024-06-14 20:48:11
Linux(Ubuntu)下mysql5.7.17安装配置方法图文教程
2024-01-25 21:28:32
Django静态文件加载失败解决方案
2021-05-25 19:40:47
Tensorflow中使用tfrecord方式读取数据的方法
2023-12-05 01:01:18
理解MySQL变量和条件
2024-01-22 21:29:29
有用的SQL语句（删除重复记录，收缩日志）
2008-03-04 16:59:00
ES6入门教程之let和const命令详解
2024-05-22 10:37:07
python list删除元素时要注意的坑点分享
2021-07-15 16:02:22
给大家整理了19个pythonic的编程习惯(小结)
2024-01-02 08:00:05
利用Vscode进行Python开发环境配置的步骤
2023-04-18 09:06:46
