Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery

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:

The specific code is as follows:

nbsp;html>


<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></script>
<script>
  $(function(){
   //服务
   $(&#39;.one_fourth_box&#39;).each(function(){
    $(this).hover(function(){
     $(this).children(&#39;.ofb-img&#39;).stop(true).animate({top:&#39;-135px&#39;})
     $(this).children(&#39;.ofb-img-bottom&#39;).stop(true).animate({top:&#39;25px&#39;})
     $(this).children(&#39;.ofb-text&#39;).stop(true).animate({top:&#39;160px&#39;})
     $(this).children(&#39;.ofb-text-top&#39;).stop(true).animate({top:&#39;25px&#39;})
     $(this).children(&#39;.ofb-bg&#39;).stop(true,true).fadeIn();
    },function(){
     $(this).children(&#39;.ofb-img&#39;).stop(true).animate({top:&#39;25px&#39;})
     $(this).children(&#39;.ofb-img-bottom&#39;).stop(true).animate({top:&#39;160px&#39;})
     $(this).children(&#39;.ofb-text&#39;).stop(true).animate({top:&#39;25px&#39;})
     $(this).children(&#39;.ofb-text-top&#39;).stop(true).animate({top:&#39;-110px&#39;})
     $(this).children(&#39;.ofb-bg&#39;).stop(true,true).fadeOut();
    })
   })
  })
 </script>
<meta>

<p> <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 </a></p>
 <p>
 </p><h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 
  <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 
 <p>
 </p>
<h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 
 </a> <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113025969.jpg" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 
 <p>
 </p>
<h5 id="节-能-Saving">节 能/Saving</h5>
 <p>玻璃窗是建筑物中隔热和保温最弱的环节。Sunscape太阳隔热膜能使窗户增加隔热和保
 温性能，有助于增加舒适性</p>
 
 </a> <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113741210.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113518952.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="移动互联网">移动互联网</h5>
 <p>移动互联网：APP客户端开发，Android、IOS、Winphone 多平台支持</p>
 
 <p>
 </p>
<h5 id="移动互联网">移动互联网</h5>
 <p>移动互联网：手机网站建设、APP客户端开发，Android、IOS、Winphone 多平台支持</p>
 
 </a> <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113138004.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810113033195.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="网站运维">网站运维</h5>
 <p>您多长时间更新一次网站？每天、每周还是半年...<br>
 网站运行的怎么样？给您带来收益了吗？<br>
 网站的运营与维护将决定网站的生命质量。</p>
 
 <p>
 </p>
<h5 id="网站运维">网站运维</h5>
 <p>您多长时间更新一次网站？每天、每周还是半年...网站运行的怎么样？给您带来收益了吗？网站的运营与维护将决定网站的生命质量。</p>
 
 </a> <a>
 <p></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810114041131.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p><img  src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201508/2015810114120324.png" class="lazy" alt="Detailed explanation of the scrolling switching effect of image and text highlighting with jQuery" ></p>
 <p>
 </p>
<h5 id="产品开发">产品开发</h5>
 <p>互联网功能性平台建设，定制化功能性网站产品销售。</p>
 
 <p>
 </p>
<h5 id="产品开发">产品开发</h5>
 <p>互联网功能性平台建设，定制化网站产品开发服务。</p>
 
 </a> 
<p><br>
</p>

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

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!