jQuery實現(xiàn)的圖文高亮滾動切換特效實例
更新時間：2015年08月10日 11:31:26 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)的圖文高亮滾動切換特效,涉及jquery基于鼠標(biāo)事件針對頁面元素遍歷與動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的圖文高亮滾動切換特效。分享給大家供大家參考。具體如下：
這里介紹jQuery圖文高亮滾動切換特效，jQuery鼠標(biāo)滑過圖文開關(guān)燈切換特效，背景變暗，子內(nèi)容向上滑動顯示出來，鼠標(biāo)的操作感極強，希望大家喜歡本效果。
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery圖文高亮滾動切換</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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太陽隔熱膜能使窗戶增加隔熱和保
溫性能，有助于增加舒適性</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">移動互聯(lián)網(wǎng)</h5>
<p class="color_666">移動互聯(lián)網(wǎng)：APP客戶端開發(fā)，Android、IOS、Winphone 多平臺支持</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">移動互聯(lián)網(wǎng)</h5>
<p class="color_999">移動互聯(lián)網(wǎng)：手機網(wǎng)站建設(shè)、APP客戶端開發(fā)，Android、IOS、Winphone 多平臺支持</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)站運維</h5>
<p class="color_666">您多長時間更新一次網(wǎng)站？每天、每周還是半年...<br>
網(wǎng)站運行的怎么樣？給您帶來收益了嗎？<br>
網(wǎng)站的運營與維護(hù)將決定網(wǎng)站的生命質(zhì)量。</p>
</div>
<div class="ofb-text-top" style="top: -110px;">
<h5 class="color_orange">網(wǎng)站運維</h5>
<p class="color_999">您多長時間更新一次網(wǎng)站？每天、每周還是半年...網(wǎng)站運行的怎么樣？給您帶來收益了嗎？網(wǎ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)功能性平臺建設(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)功能性平臺建設(shè)，定制化網(wǎng)站產(chǎn)品開發(fā)服務(wù)。</p>
</div>
</a> </div>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery實現(xiàn)Tab菜單滾動切換的方法
- jQuery圖片輪播滾動切換代碼分享
- jQuery實現(xiàn)滾動切換的tab選項卡效果代碼
- jQuery插件multiScroll實現(xiàn)全屏鼠標(biāo)滾動切換頁面特效
- jQuery插件Elastislide實現(xiàn)響應(yīng)式的焦點圖無縫滾動切換特效
- jQuery bxCarousel實現(xiàn)圖片滾動切換效果示例代碼
- 基于Jquery實現(xiàn)的一個圖片滾動切換
- 簡短幾句jquery代碼的實現(xiàn)一個圖片向上滾動切換
- jquery 圓形旋轉(zhuǎn)圖片滾動切換效果
- 基于jQuery實現(xiàn)滾動切換效果
相關(guān)文章
Jquery節(jié)點遍歷next與nextAll方法使用示例
next()方法用于獲取“節(jié)點之后”挨著它的第一個“同類同輩”元素。nextAll()方法用于獲取“節(jié)點之后”所有的元素2014-07-07
節(jié)點的插入之a(chǎn)ppend()和appendTo()的用法介紹
說到節(jié)點的插入想必大家對append()和appendTo()的用法并不陌生吧，下面有個不錯的是，希望對大家學(xué)習(xí)有所幫助2014-01-01
jQuery使用fadeout實現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實現(xiàn)元素漸隱效果的方法,實例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery+css3實現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實現(xiàn)的經(jīng)典彈出層效果,結(jié)合實例形式分析了jquery+css3實現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jQuery中(function(){})()執(zhí)行順序的理解
function的順序是這樣的：先計算第一個小括號，發(fā)現(xiàn)里面的表達(dá)式是一個函數(shù)，返會該匿名函數(shù)的引用（指針），最后一個括號則是建立匿名函數(shù)的實參和并執(zhí)行，感興趣的你可以參考下本文2013-03-03
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽，但是要保持里面的內(nèi)容不被刪除，本文提供的這個jquery方法就可以簡單實現(xiàn)。2014-04-04
這篇文章主要介紹了jquery中的過濾操作。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章小編為大家介紹，使用jQuery獲取瀏覽器中的分辨率的方法。需要的朋友參考下2013-04-04
本文是對jquery的map與get方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
基于jQuery實現(xiàn)響應(yīng)式圓形圖片輪播特效
這篇文章主要介紹了基于jQuery實現(xiàn)響應(yīng)式圓形圖片輪播特效，mislider插件可以將圖片以圓形圖片顯示，然后使圖片無限循環(huán)形成輪播圖或旋轉(zhuǎn)木馬特效，感興趣的小伙伴們可以參考一下2015-11-11