jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果
更新時(shí)間：2017年04月27日 10:05:16 作者：小小沫
本篇文章主要介紹了jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果</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 -->
<div class="servicesBox">
<div id="Div35" class="serBox" onclick="serFocus(1)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </div>
<div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </div>
<div class="txt1"> <span class="tit">開心網(wǎng)</span>
<p>開心網(wǎng)營銷</p>
</div>
<div class="txt2">
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">開心網(wǎng)</span>
<p>開心網(wǎng)營銷</p>
</a>
</div>
</div>
<div id="Div36" class="serBox" onclick="serFocus(2)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </div>
<div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </div>
<div class="txt1"> <span class="tit">人人網(wǎng)</span>
<p>人人網(wǎng)營銷</p>
</div>
<div class="txt2">
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">人人網(wǎng)</span>
<p>人人網(wǎng)營銷</p>
</a>
</div>
</div>
<div id="Div37" class="serBox" onclick="serFocus(3)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </div>
<div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </div>
<div class="txt1"> <span class="tit">QQ空間</span>
<p>QQ空間營銷</p>
</div>
<div class="txt2">
<a 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>
</div>
</div>
<div id="Div38" class="serBox" onclick="serFocus(3)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </div>
<div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </div>
<div class="txt1"> <span class="tit">問答營銷</span>
<p>問答投放 鎖住潛在客戶</p>
</div>
<div class="txt2">
<a 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>
</div>
</div>
<div id="Div39" class="serBox" onclick="serFocus(3)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </div>
<div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </div>
<div class="txt1"> <span class="tit">郵件推廣</span>
<p>低成本 商機(jī)無限</p>
</div>
<div class="txt2">
<a 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>低成本 商機(jī)無限</p>
</a>
</div>
</div>
</div>
<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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開動(dòng)畫效果
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示案例
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停背景翻轉(zhuǎn)的黑色導(dǎo)航菜單代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
- 基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
- jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
- 分享33個(gè)jQuery與CSS3實(shí)現(xiàn)的絢麗鼠標(biāo)懸停效果
- jQuery實(shí)現(xiàn)列表自動(dòng)循環(huán)滾動(dòng)鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果
相關(guān)文章
jQuery實(shí)現(xiàn)的老虎機(jī)跑動(dòng)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的老虎機(jī)跑動(dòng)效果,涉及jQuery事件響應(yīng)以及結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的，jquery是多此一舉了，直到我遇到一次問題2012-10-10
artDialog雙擊會(huì)關(guān)閉對話框的修改過程分享
artDialog，一個(gè)jquery的對話框插件但是在使用時(shí)發(fā)現(xiàn)鼠標(biāo)雙擊時(shí)會(huì)自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下2013-08-08
Jquery時(shí)間驗(yàn)證和轉(zhuǎn)換工具小例子
這篇文章介紹了Jquery時(shí)間驗(yàn)證和轉(zhuǎn)換工具小例子，有需要的朋友可以參考一下2013-07-07
本篇文章小編為大家介紹，基于JQuery 選擇器使用說明介紹。需要的朋友參考下2013-04-04
在使用slideToggle 的時(shí)候經(jīng)常會(huì)遇到列表收起時(shí)候閃爍的問題,一般IE瀏覽器會(huì)有這個(gè)問題，其他瀏覽器比如火狐不會(huì)出現(xiàn)閃爍.2011-07-07
基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化
這篇文章主要為大家詳細(xì)介紹了基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
用JQUERY增刪元素的代碼，需要的朋友可以參考下2012-02-02
jquery實(shí)現(xiàn)疊層3D文字特效代碼分享
本文主要介紹了jquery實(shí)現(xiàn)疊層3D文字特效，實(shí)現(xiàn)很簡單2015-08-08
遍歷每一行的同時(shí)一定要記住這里是gridviewrow不是datarow，找到這個(gè)選中項(xiàng)在執(zhí)行刪除2013-04-04