首页
所有分类
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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
jQuery 性能优化指南（2）
May 21 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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
收音机(62) 电台频率(32) 中波(3) Harman Kardon(1) 调频(4) SWL(1) 立体声(1) KDKA(1) GWEN(1) ad hoc(1)
You might like
PHP 反向排序和随机排序代码
2010/06/30 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php实现中文转数字
2016/02/18 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
js 处理URL实用技巧
2010/11/23 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
耐克亚太地区：Nike APAC
2019/12/07 全球购物
招商业务员岗位职责
2013/12/16 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
2014信息公开实施方案
2014/02/22 职场文书
公证书样本
2014/04/10 职场文书
同学聚会通知书
2015/04/20 职场文书
免职通知
2015/04/23 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技
使用CSS实现音波加载效果
2023/05/07 HTML / CSS