Heim >Datenbank >MySQL-Tutorial >jQuery-Maus-Hover-Inhaltsanimations-Umschalteffekt-Implementierungscode
jQuery-Maus-Hover-Inhaltsanimations-Umschalteffekt-Implementierungscode
- 小云云Original
- 2018-01-17 11:16:341958Durchsuche
In diesem Artikel werden hauptsächlich Beispiele für Umschalteffekte bei jQuery-Maus-Hover-Inhaltsanimationen vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem untenstehenden Editor. Ich hoffe, er kann allen helfen.
Der Effekt ist wie folgt:
Der Code ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery鼠标悬停内容动画切换效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
a {
color: #fff;
text-decoration: none;
}
.servicesBox {
width: 1000px;
height: 270px;
margin: 0 auto;
clear: both;
line-height: 18px;
color: #999999;
font-size: 12px;
}
.servicesBox .serBox {
cursor: pointer;
border: 1px solid #fff;
display: inline;
width: 198px;
height: 250px;
float: left;
overflow: hidden;
background-color: #f7f7f7;
position: relative;
}
.servicesBox .serBoxOn {
font-family: "Microsoft Yahei";
display: none;
width: 320px;
height: 270px;
background: url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: 19;
}
.servicesBox .serBox .pic1 {
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
right: 41px;
z-index: 99;
}
.servicesBox .serBox .pic2 {
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
left: -110px;
z-index: 99;
}
.servicesBox .serBox .txt1 {
width: 198px;
height: 100px;
color: #999999;
position: absolute;
top: 145px;
left: 0px;
z-index: 99;
}
.servicesBox .serBox .txt2 {
width: 198px;
height: 100px;
color: #a9cf4f;
position: absolute;
top: 145px;
right: -240px;
z-index: 99;
}
.servicesBox .serBox span.tit {
font-size: 16px;
display: block;
text-align: center;
}
.servicesBox .serBox .txt1 .tit {
color: #000000;
line-height: 30px;
}
.servicesBox .serBox .txt2 .tit {
color: #fff;
line-height: 30px;
font-family: "Microsoft Yahei";
}
.servicesBox .serBox p {
padding: 0 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- 代码begin -->
<p class="servicesBox">
<p id="p35" class="serBox" onclick="serFocus(1)">
<p class="serBoxOn"></p>
<p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </p>
<p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </p>
<p class="txt1"> <span class="tit">开心网</span>
<p>开心网营销</p>
</p>
<p class="txt2">
<a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">开心网</span>
<p>开心网营销</p>
</a>
</p>
</p>
<p id="p36" class="serBox" onclick="serFocus(2)">
<p class="serBoxOn"></p>
<p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </p>
<p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </p>
<p class="txt1"> <span class="tit">人人网</span>
<p>人人网营销</p>
</p>
<p class="txt2">
<a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">人人网</span>
<p>人人网营销</p>
</a>
</p>
</p>
<p id="p37" class="serBox" onclick="serFocus(3)">
<p class="serBoxOn"></p>
<p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </p>
<p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </p>
<p class="txt1"> <span class="tit">QQ空间</span>
<p>QQ空间营销</p>
</p>
<p class="txt2">
<a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">QQ空间</span>
<p>QQ空间营销</p>
</a>
</p>
</p>
<p id="p38" class="serBox" onclick="serFocus(3)">
<p class="serBoxOn"></p>
<p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </p>
<p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </p>
<p class="txt1"> <span class="tit">问答营销</span>
<p>问答投放 锁住潜在客户</p>
</p>
<p class="txt2">
<a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">问答营销</span>
<p>问答投放 锁住潜在客户</p>
</a>
</p>
</p>
<p id="p39" class="serBox" onclick="serFocus(3)">
<p class="serBoxOn"></p>
<p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </p>
<p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </p>
<p class="txt1"> <span class="tit">邮件推广</span>
<p>低成本 商机无限</p>
</p>
<p class="txt2">
<a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">邮件推广</span>
<p>低成本 商机无限</p>
</a>
</p>
</p>
</p>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function() {
$(".serBox").hover(
function() {
$(this).children().stop(false, true);
$(this).children(".serBoxOn").fadeIn("slow");
$(this).children(".pic1").animate({
right: -110
}, 400);
$(this).children(".pic2").animate({
left: 41
}, 400);
$(this).children(".txt1").animate({
left: -240
}, 400);
$(this).children(".txt2").animate({
right: 0
}, 400);
},
function() {
$(this).children().stop(false, true);
$(this).children(".serBoxOn").fadeOut("slow");
$(this).children(".pic1").animate({
right: 41
}, 400);
$(this).children(".pic2").animate({
left: -110
}, 400);
$(this).children(".txt1").animate({
left: 0
}, 400);
$(this).children(".txt2").animate({
right: -240
}, 400);
}
);
});
</script>
<!-- 代码end -->
</body>
</html>Verwandte Empfehlungen:
Erklärung des JQuery-Mouse-Over-Navigations-Unterstreichungs-Slide-Out-Effekts
Wie man CSS verwendet, um das zu erstellen Bild grau, wenn die Maus darüber schwebt
Javascript-Imitationsspiel-Website-Spezialeffekte mit der Maus bewegen, um Untermenü anzuzeigen
Das obige ist der detaillierte Inhalt vonjQuery-Maus-Hover-Inhaltsanimations-Umschalteffekt-Implementierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn