首页
所有分类
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 设计模式 推荐
Oct 28 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
Xpath(1) Counter(1) pip(1) 爬虫(2) LOGO(1) MIME(1) 写入策略(1) 抖音(1) binlog(2) most_common(1)
You might like
2019十大人气国漫
2020/03/13 国漫
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
分离与继承的思想实现图片上传后的预览功能：ImageUploadView
2016/04/07 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
JavaScript限定范围拖拽及自定义滚动条应用（3）
2017/05/17 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
详解关于html，css，js三者的加载顺序问题
2019/04/10 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python 文件与目录操作
2008/12/24 Python
Python中表示字符串的三种方法
2017/09/06 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
GUESS Factory加拿大：牛仔裤、服装及配饰
2019/09/20 全球购物
某/etc/fstab文件中的某行如下： /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
中间件分为哪几类
2012/03/14 面试题
电子专业求职信
2014/06/19 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
拖欠货款起诉状
2015/05/20 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL