This time I will bring you a detailed explanation of jQuery's scrolling switching effect of graphic and text highlighting. What are the precautions for jQuery to create scrolling switching effect of graphic and text highlighting. The following is a practical case. Let's take a look. take a look.
Here we introduce the jQuery graphic and text highlight scrolling switching effect. jQuery mouse slides over the graphic and text switch light switching special effect. The background darkens and the sub-content slides up to display. The mouse operation feels very strong. I hope you like it. This effect. The screenshot of the running effect is as follows:
<!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>jquery mouse drags Table to sort (with code)
jQuery realizes sliding switching of provinces and cities (With code)
The above is the detailed content of Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
