jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效實(shí)例
更新時(shí)間：2015年08月10日 11:31:26 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效,涉及jquery基于鼠標(biāo)事件針對(duì)頁(yè)面元素遍歷與動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效。分享給大家供大家參考。具體如下：
這里介紹jQuery圖文高亮滾動(dòng)切換特效，jQuery鼠標(biāo)滑過圖文開關(guān)燈切換特效，背景變暗，子內(nèi)容向上滑動(dòng)顯示出來，鼠標(biāo)的操作感極強(qiáng)，希望大家喜歡本效果。
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery圖文高亮滾動(dòng)切換</title>
<style>
*{ margin:0; padding:0;}
body{ font-family:"宋體"; font-size:12px;text-decoration:none; color:#292929; }
h1,h2,h3,h4,h5,h6,p,input,select,td{margin:0;padding:0;}
li{list-style:none;}
.fl{float:left;}
a{text-decoration:none;color:#353535;}
img{border:0; vertical-align:top;}
.clear{clear:both;}
.grid1k {
width: 990px;
margin: 0 auto;
}
.grid_full {
width: 100%;
}
.grid1024 {
width: 1024px;
margin: 0 auto;
}
.fr {
float: right;
}
.fl {
float: left;
}
.color_blue {
color: #29388c;
}
.color_fff {
color: #fff;
}
.color_333 {
color: #333;
}
.color_666 {
color: #666;
}
.color_999 {
color: #999;
}
.color_orange {
color: #e88d27;
}
.one_fourth_box {
display: block;
position: relative;
width: 326px;
height: 135px;
margin: 0 2px 2px 0;
background: #f6f6f6;
overflow: hidden;
}
.ofb-r {
margin-right: 0!important;
}
.ofb-bg {
display: none;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: #333;
}
.ofb-img {
position: absolute;
top: 32px;
left: 13px;
z-index: 10;
}
.ofb-img-bottom {
position: absolute;
top: 160px;
left: 13px;
z-index: 10;
}
.ofb-text {
position: absolute;
top: 25px;
left: 144px;
width:178px;
z-index: 10;
}
.ofb-text-top {
position: absolute;
top: -110px;
left: 144px;
width: 178px;
z-index: 10;
}
.ofb-text h5,.ofb-text-top h5 {
font-size: 14px; line-height:16px;
}
.ofb-text p,.ofb-text-top p {
margin-top: 3px; font-size:12px; font-family:"宋體"; line-height:15px;
}
.ofb-r .ofb-img,.ofb-r .ofb-img-bottom {
left: 65px;
}
.ofb-r .ofb-text,.ofb-r .ofb-text-top {
left: 235px;
width: 265px;
}
.color_111{ font-size:14px; color: #999;}
.color_222{ font-size:14px; color: #000;}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
//服務(wù)
$('.one_fourth_box').each(function(){
$(this).hover(function(){
$(this).children('.ofb-img').stop(true).animate({top:'-135px'})
$(this).children('.ofb-img-bottom').stop(true).animate({top:'25px'})
$(this).children('.ofb-text').stop(true).animate({top:'160px'})
$(this).children('.ofb-text-top').stop(true).animate({top:'25px'})
$(this).children('.ofb-bg').stop(true,true).fadeIn();
},function(){
$(this).children('.ofb-img').stop(true).animate({top:'25px'})
$(this).children('.ofb-img-bottom').stop(true).animate({top:'160px'})
$(this).children('.ofb-text').stop(true).animate({top:'25px'})
$(this).children('.ofb-text-top').stop(true).animate({top:'-110px'})
$(this).children('.ofb-bg').stop(true,true).fadeOut();
})
})
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="grid1k"> <a href="/" class="one_fourth_box fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">節(jié) 能/Saving</h5>
<p class="color_666">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">節(jié) 能/Saving</h5>
<p class="color_999">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
</a> <a href="/" class="one_fourth_box fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">節(jié) 能/Saving</h5>
<p class="color_666">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">節(jié) 能/Saving</h5>
<p class="color_999">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
</a> <a href="/" class="one_fourth_box fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">節(jié) 能/Saving</h5>
<p class="color_666">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">節(jié) 能/Saving</h5>
<p class="color_999">玻璃窗是建筑物中隔熱和保溫最弱的環(huán)節(jié)。Sunscape太陽(yáng)隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</p>
</div>
</a> <a href="/" class="one_fourth_box ofb-r fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113741210.png" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113518952.png" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">移動(dòng)互聯(lián)網(wǎng)</h5>
<p class="color_666">移動(dòng)互聯(lián)網(wǎng)：APP客戶端開發(fā)，Android、IOS、Winphone 多平臺(tái)支持</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">移動(dòng)互聯(lián)網(wǎng)</h5>
<p class="color_999">移動(dòng)互聯(lián)網(wǎng)：手機(jī)網(wǎng)站建設(shè)、APP客戶端開發(fā)，Android、IOS、Winphone 多平臺(tái)支持</p>
</div>
</a> <a href="/" class="one_fourth_box fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113138004.png" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810113033195.png" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">網(wǎng)站運(yùn)維</h5>
<p class="color_666">您多長(zhǎng)時(shí)間更新一次網(wǎng)站？每天、每周還是半年...<br>
網(wǎng)站運(yùn)行的怎么樣？給您帶來收益了嗎？<br>
網(wǎng)站的運(yùn)營(yíng)與維護(hù)將決定網(wǎng)站的生命質(zhì)量。</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">網(wǎng)站運(yùn)維</h5>
<p class="color_999">您多長(zhǎng)時(shí)間更新一次網(wǎng)站？每天、每周還是半年...網(wǎng)站運(yùn)行的怎么樣？給您帶來收益了嗎？網(wǎng)站的運(yùn)營(yíng)與維護(hù)將決定網(wǎng)站的生命質(zhì)量。</p>
</div>
</a> <a href="/" class="one_fourth_box ofb-r fl">
<div class="ofb-bg" style="display: none;"></div>
<div class="ofb-img mypng" style="top: 25px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810114041131.png" alt=""></div>
<div class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://img.jbzj.com/file_images/article/201508/2015810114120324.png" alt=""></div>
<div class="ofb-text" style="top: 25px;">
<h5 class="color_333">產(chǎn)品開發(fā)</h5>
<p class="color_666">互聯(lián)網(wǎng)功能性平臺(tái)建設(shè)，定制化功能性網(wǎng)站產(chǎn)品銷售。</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">產(chǎn)品開發(fā)</h5>
<p class="color_999">互聯(lián)網(wǎng)功能性平臺(tái)建設(shè)，定制化網(wǎng)站產(chǎn)品開發(fā)服務(wù)。</p>
</div>
</a> </div>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
- jQuery圖片輪播滾動(dòng)切換代碼分享
- jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
- jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效
- jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無縫滾動(dòng)切換特效
- jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- 簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- 基于jQuery實(shí)現(xiàn)滾動(dòng)切換效果
相關(guān)文章
Jquery節(jié)點(diǎn)遍歷next與nextAll方法使用示例
next()方法用于獲取“節(jié)點(diǎn)之后”挨著它的第一個(gè)“同類同輩”元素。nextAll()方法用于獲取“節(jié)點(diǎn)之后”所有的元素2014-07-07
節(jié)點(diǎn)的插入之a(chǎn)ppend()和appendTo()的用法介紹
說到節(jié)點(diǎn)的插入想必大家對(duì)append()和appendTo()的用法并不陌生吧，下面有個(gè)不錯(cuò)的是，希望對(duì)大家學(xué)習(xí)有所幫助2014-01-01
jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果,結(jié)合實(shí)例形式分析了jquery+css3實(shí)現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jQuery中(function(){})()執(zhí)行順序的理解
function的順序是這樣的：先計(jì)算第一個(gè)小括號(hào)，發(fā)現(xiàn)里面的表達(dá)式是一個(gè)函數(shù)，返會(huì)該匿名函數(shù)的引用（指針），最后一個(gè)括號(hào)則是建立匿名函數(shù)的實(shí)參和并執(zhí)行，感興趣的你可以參考下本文2013-03-03
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時(shí)我們希望刪除這段html代碼里面的一對(duì)<p>標(biāo)簽，但是要保持里面的內(nèi)容不被刪除，本文提供的這個(gè)jquery方法就可以簡(jiǎn)單實(shí)現(xiàn)。2014-04-04
這篇文章主要介紹了jquery中的過濾操作。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
jQuery獲取瀏覽器中的分辨率實(shí)現(xiàn)代碼
本篇文章小編為大家介紹，使用jQuery獲取瀏覽器中的分辨率的方法。需要的朋友參考下2013-04-04
本文是對(duì)jquery的map與get方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
基于jQuery實(shí)現(xiàn)響應(yīng)式圓形圖片輪播特效
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)響應(yīng)式圓形圖片輪播特效，mislider插件可以將圖片以圓形圖片顯示，然后使圖片無限循環(huán)形成輪播圖或旋轉(zhuǎn)木馬特效，感興趣的小伙伴們可以參考一下2015-11-11