首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 10, 2015

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

这里介绍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="//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="//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">节 能/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="//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="//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">节 能/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="//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="//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">节 能/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="//img.jbzj.com/file_images/article/201508/2015810113741210.png" alt=""></div>
 <div class="ofb-img-bottom mypng" style="top: 160px;"><img src="//img.jbzj.com/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="//img.jbzj.com/file_images/article/201508/2015810113138004.png" alt=""></div>
 <div class="ofb-img-bottom mypng" style="top: 160px;"><img src="//img.jbzj.com/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="//img.jbzj.com/file_images/article/201508/2015810114041131.png" alt=""></div>
 <div class="ofb-img-bottom mypng" style="top: 160px;"><img src="//img.jbzj.com/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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 #Javascript
javascript中caller和callee详解
Aug 10 #Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 #Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 #Javascript
jQuery中$(function() {});问题详解
Aug 10 #Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
俄罗斯购物网站(137) 马来西亚购物网站(41) 日本购物网站(72) 法国购物网站(144) 墨西哥购物网站(16) 埃及购物网站(2) 德国购物网站(227) 瑞士购物网站(28) 印度购物网站(45) 印尼购物网站(37)
You might like
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
详解json在php中的应用
2018/09/30 PHP
javascript hashtable实现代码
2009/10/13 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
详解Python验证码识别
2016/01/25 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
大码女装：Ulla Popken
2019/08/06 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
学生个人自我鉴定
2014/03/26 职场文书
电信营业员岗位职责
2015/04/14 职场文书
李强为自己工作观后感
2015/06/11 职场文书