jQuery实现的图文高亮滚动切换特效实例

前端技术 2023/09/04 JavaScript

本文实例讲述了jQuery实现的图文高亮滚动切换特效。分享给大家供大家参考。具体如下：

这里介绍jQuery图文高亮滚动切换特效，jQuery鼠标滑过图文开关灯切换特效，背景变暗，子内容向上滑动显示出来，鼠标的操作感极强，希望大家喜欢本效果。

运行效果截图如下：

具体代码如下：

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

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10006

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案