Home > Article > Web Front-end > How to implement image sliding effect with jQuery
How to implement image sliding effect with jQuery
- 小云云Original
- 2018-01-23 09:19:472028browse
Image sliding is needed in many places. This article mainly introduces examples of jQuery realizing the image sliding effect, which has a good reference value. Let's take a look with the editor below, I hope it can help everyone.
Idea: When the mouse enters the element, the first function in hover is triggered, and when the mouse leaves, the second function in hover is triggered.
As shown in the picture:
##The code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 1000px;
margin: 0 auto;
}
li{
cursor: pointer;
border: 1px solid #fff;
display: inline-block;
width: 198px;
height: 250px;
float: left;
overflow: hidden;
background-color: #f7f7f7;
position: relative;
}
li .fade{
font-family: "微软雅黑";
display: none;
width: 320px;
height: 270px;
background: #090;
position: absolute;
left: 0px;
top: 0px;
z-index: 19;
}
li .img1{
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
right: 41px;
z-index: 99;
}
li .img2{
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
left: -110px;
z-index: 99;
}
li .txt1{
width: 198px;
height: 100px;
color: #999999;
position: absolute;
top: 145px;
left: 0px;
z-index: 99;
text-align: center;
}
li .txt2{
width: 198px;
height: 100px;
color: #a9cf4f;
position: absolute;
top: 145px;
right: -240px;
z-index: 99;
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<p class="main">
<ul>
<li>
<p class="fade"></p>
<p class="img1"><img src="img/1.png"></p>
<p class="img2"><img src="img/1-1.png"></p>
<p class="txt1">啦啦啦啦啦</p>
<p class="txt2">是是是是是</p>
</li>
<li>
<p class="fade"></p>
<p class="img1"><img src="img/2.png"></p>
<p class="img2"><img src="img/2-2.png"></p>
<p class="txt1">啦啦啦啦啦</p>
<p class="txt2">是是是是是</p>
</li>
<li>
<p class="fade"></p>
<p class="img1"><img src="img/1.png"></p>
<p class="img2"><img src="img/1-1.png"></p>
<p class="txt1">啦啦啦啦啦</p>
<p class="txt2">是是是是是</p>
</li>
<li>
<p class="fade"></p>
<p class="img1"><img src="img/2.png"></p>
<p class="img2"><img src="img/2-2.png"></p>
<p class="txt1">啦啦啦啦啦</p>
<p class="txt2">是是是是是</p>
</li>
</ul>
</p>
<script>
$(function(){
$("ul li").hover(function(){
$(this).children().stop(false,true);
$(this).find(".fade").fadeIn("slow");
$(this).find(".img1").animate({right:-110},400);
$(this).find(".img2").animate({left:41},400);
$(this).find(".txt1").animate({left:240},400);
$(this).find(".txt2").animate({right:0},400);
},function(){
$(this).children().stop(false,true);
$(this).find(".fade").fadeOut("slow");
$(this).find(".img1").animate({right:41},400);
$(this).find(".img2").animate({left:-110},400);
$(this).find(".txt1").animate({left:0},400);
$(this).find(".txt2").animate({right:-240},400);
})
})
</script>
</body>
</html>Related recommendations:
js plug-in to implement image sliding verification code example sharing
JavaScript image sliding switching effect
javascript Image sliding switching code_Image special effects
The above is the detailed content of How to implement image sliding effect with jQuery. For more information, please follow other related articles on the PHP Chinese website!