html相册滑动⼿风琴效果实现,JS实现图⽚⼿风琴效果
''推拉门''动效也可以称作"⼿风琴"效果，⼤多数效果实现的思路基本是⼀样的，下⾯介绍两种⽅法，⼀种是通过改变图⽚的偏移位置实现移动，另⼀种是通过遍历背景图⽚后改变图⽚的宽度实现变换。
推拉门收缩状态.png
"推拉门"展开状态.png
"推拉门"实现⽅法⼀：改变图⽚宽度
html+css代码
*{
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;
}
jQuery实现
$(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 其他图⽚(兄弟)改为useenter(function(){
// console.log(this); 当前的li DOM元素
//当前的图⽚的宽度变为800
$(this).stop().animate({width: 800});
//其他图⽚的宽度变为100
$(this).siblings('li').stop().animate({width: 100});
});
//3⿏标滑出是全部显⽰为收缩状态
lis.stop().animate({width: 240});
});
"推拉门"实现⽅法⼆：改变图⽚的偏移值html+css代码
*{
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;
}
jQuery实现
$(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);
}
});
})
注意：⽅法⼀在实现的过程中，注意宽度和图⽚命名的设置。
提⽰：这⾥使⽤的是jQuery代码实现，javaScript代码也是⼀样的可以实现，只是修改下遍历过程和内置函数⽅法，另外再重写动画函数(前⾯的笔记有封装好的animate函数，可以直接引⼊使⽤)。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。
html图片展示特效
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论