Ausführliche Erläuterung des Scrolling-Switching-Effekts der Bild- und Texthervorhebung mit jQuery-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen den Scroll-Switching-Effekt beim Hervorheben von Text und Grafiken ausführlich erklären. Was sind die Vorsichtsmaßnahmen für jQuery, um den Scroll-Switching-Effekt von Grafiken und Text hervorzuheben? Werfen wir einen Blick darauf.

Hier stellen wir den jQuery-Bildlaufeffekt für Grafik- und Texthervorhebungen vor. Der Hintergrund wird dunkler und der Unterinhalt wird nach oben verschoben, um ihn anzuzeigen Sehr stark. Ich hoffe, jeder mag diesen Effekt.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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(){
   //服务
   $('.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>
<p class="grid1k"> <a href="/" class="one_fourth_box fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">节 能/Saving</h5>
 <p class="color_666">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">节 能/Saving</h5>
 <p class="color_999">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 </a> <a href="/" class="one_fourth_box fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">节 能/Saving</h5>
 <p class="color_666">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">节 能/Saving</h5>
 <p class="color_999">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 </a> <a href="/" class="one_fourth_box fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" width="118" height="78" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">节 能/Saving</h5>
 <p class="color_666">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">节 能/Saving</h5>
 <p class="color_999">玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </p>
 </a> <a href="/" class="one_fourth_box ofb-r fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113741210.png" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113518952.png" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">移动互联网</h5>
 <p class="color_666">移动互联网：APP客户端开发，Android、IOS、Winphone 多平台支持</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">移动互联网</h5>
 <p class="color_999">移动互联网：手机网站建设、APP客户端开发，Android、IOS、Winphone 多平台支持</p>
 </p>
 </a> <a href="/" class="one_fourth_box fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113138004.png" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810113033195.png" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">网站运维</h5>
 <p class="color_666">您多长时间更新一次网站？每天、每周还是半年...<br>
 网站运行的怎么样？给您带来收益了吗？<br>
 网站的运营与维护将决定网站的生命质量。</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">网站运维</h5>
 <p class="color_999">您多长时间更新一次网站？每天、每周还是半年...网站运行的怎么样？给您带来收益了吗？网站的运营与维护将决定网站的生命质量。</p>
 </p>
 </a> <a href="/" class="one_fourth_box ofb-r fl">
 <p class="ofb-bg" style="display: none;"></p>
 <p class="ofb-img mypng" style="top: 25px;"><img src="http://files.jb51.net/file_images/article/201508/2015810114041131.png" alt=""></p>
 <p class="ofb-img-bottom mypng" style="top: 160px;"><img src="http://files.jb51.net/file_images/article/201508/2015810114120324.png" alt=""></p>
 <p class="ofb-text" style="top: 25px;">
 <h5 class="color_333">产品开发</h5>
 <p class="color_666">互联网功能性平台建设，定制化功能性网站产品销售。</p>
 </p>
 <p class="ofb-text-top" style="top: -110px;">
 <h5 class="color_orange">产品开发</h5>
 <p class="color_999">互联网功能性平台建设，定制化网站产品开发服务。</p>
 </p>
 </a> </p>
<p style="text-align:center;clear:both"><br>
</p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, erfahren Sie mehr über die Methode. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery-Maus-Ziehen Tabelle zum Sortieren (mit Code)

jQuery realisiert das gleitende Umschalten von Provinzen und Städte (mit Code)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Scrolling-Switching-Effekts der Bild- und Texthervorhebung mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!