Maison > Article > interface Web > Partager deux façons de réaliser l'effet d'animation d'une porte coulissante avec image avec jQuery
Partager deux façons de réaliser l'effet d'animation d'une porte coulissante avec image avec jQuery
- 小云云original
- 2017-12-31 09:33:051760parcourir
L'effet dynamique « porte coulissante » peut également être appelé effet « accordéon ». L'idée de réaliser la plupart des effets est fondamentalement la même. Deux méthodes sont présentées ci-dessous. L'une consiste à déplacer l'image en changeant l'image. position de décalage. L'autre consiste à transformer en parcourant l'image d'arrière-plan puis en modifiant la largeur de l'image. Les deux méthodes de cet article permettent d'obtenir l'effet d'animation « porte coulissante », qui peut également être appelé effet accordéon. Apprenons les méthodes de mise en œuvre spécifiques à travers cet article. J'espère que cela pourra aider tout le monde.
Première méthode d'implémentation : modifier la largeur de l'image
code html+css
<body>
<p class="box">
<ul>
<!-- <li></li> -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</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>
implémentation de 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>
code simplifié 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});
});
})
Méthode d'implémentation deux : modifier la valeur de décalage de l'image
code html+css
<body>
<p class="picList">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</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>
implémentation de 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>
Remarque : méthode 1 Pendant le processus de mise en œuvre, faites attention aux paramètres de largeur et de dénomination de l'image.
Astuce : le code jQuery est utilisé ici, et le code javaScript peut être implémenté de la même manière. Modifiez simplement le processus de parcours et les méthodes de fonction intégrées, et réécrivez la fonction d'animation (les notes précédentes ont encapsulé fonction d'animation, peut être directement introduite et utilisée).
Recommandations associées :
Comment créer une page Web avec un effet d'animation d'ouverture dans Dreamweaver
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!