亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)的操作感極強(qiáng)，希望大家喜歡本效果。

運行效果截圖如下：

具體代碼如下：

<!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)：手機(jī)網(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è)計有所幫助。

相關(guān)文章

  • jQuery中trigger()方法用法實例

    jQuery中trigger()方法用法實例

    這篇文章主要介紹了jQuery中trigger()方法用法,實例分析了trigger()方法的功能、定義及觸發(fā)匹配元素指定類型事件的使用技巧,需要的朋友可以參考下
    2015-01-01
  • 在Web項目中引入Jquery插件報錯的完美解決方案(圖解)

    在Web項目中引入Jquery插件報錯的完美解決方案(圖解)

    這篇文章主要介紹了在Web項目中引入Jquery插件報錯的完美解決方案的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-09-09
  • 基于jQuery的可用于選項卡及幻燈的切換插件

    基于jQuery的可用于選項卡及幻燈的切換插件

    最近公司項目頁面中用到選項卡與幻燈比較多，特地寫了個集選項卡、幻燈片與播放控制于一體的插件，同頁面可多次使用。
    2011-03-03
  • jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】

    jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】

    這篇文章主要介紹了jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實例形式分析了jQuery針對頁面元素動態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下
    2018-04-04
  • 解析jquery中的ajax緩存問題

    解析jquery中的ajax緩存問題

    現(xiàn)在我要在瀏覽器里讀取緩存，因為ajax請求的數(shù)據(jù)很大，請求一次就夠了。但是問題來了，在FF里面，是沒有ajax緩存的，也就是每次都會觸發(fā)ajax請求，這點和IE不一樣
    2013-12-12
  • JQuery的AJAX實現(xiàn)文件下載的小例子

    JQuery的AJAX實現(xiàn)文件下載的小例子

    JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個form，用這個form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實現(xiàn)過程中，頁面也沒有進(jìn)行刷新
    2013-05-05
  • jQuery中 $ 符號的沖突問題及解決方案

    jQuery中 $ 符號的沖突問題及解決方案

    在jQuery中，$是jQuery的別名，為了書寫方便，我們更習(xí)慣用$('#id')這一類的方式來書寫代碼。這篇文章給大家分享jQuery中 $ 符號的沖突問題及解決方案，感興趣的朋友一起看看吧
    2016-11-11
  • jQuery之日期選擇器的深入解析

    jQuery之日期選擇器的深入解析

    本篇文章是jQuery中的日期選擇器進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
    2013-06-06
  • jquery插件制作簡單示例說明

    jquery插件制作簡單示例說明

    今天剛剛把jquery的插件制作學(xué)習(xí)了一下，總結(jié)一下別人寫的和自己的心得，方便其他初學(xué)者的學(xué)習(xí)，考慮到要學(xué)習(xí)jquery插件制作的人一定知道jquery插件的好處和通用性，這里就不多說
    2012-02-02
  • 一些主流JS框架中DOMReady事件的實現(xiàn)小結(jié)

    一些主流JS框架中DOMReady事件的實現(xiàn)小結(jié)

    在實際應(yīng)用中，我們經(jīng)常會遇到這樣的場景，當(dāng)頁面加載完成后去做一些事情：綁定事件、DOM操作某些結(jié)點等。
    2011-02-02

最新評論