jQuery实现图形高亮和滚动切换特效示例

本文给出了一个例子来描述jQuery实现的图文高亮和滚动切换的特殊效果。分享给大家参考。具体如下：

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

运行效果截图如下：

具体代码如下：

！DOCTYPE html html lang=' en ' head title jquery图文高亮滚动切换/title style * { margin 33600；划水：0;}正文{ font-family: '宋体；font-size :12 px文本装饰：无；color: # 292929}h1、h2、h3、h4、h5、h6、p、输入、选择、td { margin:0划水：0;}李{列表式：无；}.fl { float : left } a { text-decoration : none；颜色： # 353535} img { border:0垂直对齐：顶；}.清除{ clear:both}。网格1k {宽度： 990 pxmargin: 0 auto}。grid _ full { width : 100%；} .网格1024 {宽度： 1024 pxmargin: 0 auto}。fr { float:右侧；}.fl { float:左侧；}.color _ blue { color: # 29388c}。color _ fff { color: # fff}。color _ 333 { color: # 333}。color _ 666 { color: # 666}。color _ 999 { color: # 999}。color _ orange { color : # e88d 27；}.四分之一盒{ display:块；相对位置：宽度： 326 px高度： 135像素；margin : 0 2px 2px 0 background : # f6f 6；飞越：隐藏；}.ofb-r { margin-right: 0！重要；}.ofb-BG {显示：无；宽度： 100%;高度： 100%;绝对位置：z-index : 2；背景技术： # 333;}.ofb-img {位置：绝对；top : 32pxleft : 13 pxz-index : 10；}.ofb-img-bottom {位置：绝对值；top : 160 pxleft : 13 pxz-index : 10；}.ofb-text {位置：绝对；top : 25 ppxleft : 144 px宽度宽度：178 pxz-索引： 10；}.ofb-text-top {位置：绝对；top :-110 px；左侧： 144px宽度： 178像素；z指数： 10；}.ofb-text h5 .ofb-text-top H5 { font-size : 14px；行高：16 px}.ofb-text，p .ofb-text-top p { margin-top : 3px；font-size :12 px字体系列： '宋体；线高：15 px}.ofb-r .ofb-img .ofb-r . ofb-img-底部{左侧： 65px}.ofb-r .ofb-text .ofb-r . ofb-text-top {左： 235 px宽度： 265像素；}.color _ 111 { font-size :14 pxcolor: # 999}。color _ 222 { font-size :14 pxcolor: # 000}/style脚本src=' http : jquery-1。6 .2 .量滴js//script script $(function(){//服务$('.四分之一盒')。每个（函数(){ $(此)).悬停(function(){ $(this)).孩子们ofb-img ').停止（真)。动画({top:'-135px'}) $(这个)。孩子们ofb-img-bottom ').停止（真)。动画({top:'25px'}) $(这个)。孩子们ofb-text ').停止（真)。动画({top:'160px'}) $(这个)。孩子们ofb-text-top ').停止（真)。动画({top:'25px'}) $(这个)。孩子们ofb-BG ').停止（真，真)。fadeIn()；}，function(){ $(this).孩子们ofb-img ').停止（真)。动画({top:'25px'}) $(这个)。孩子们ofb-img-bottom ').停止（真)。动画({top:'160px'}) $(这个)。孩子们ofb-text ').停止（真)。动画({top:'25px'}) $(这个)。孩子们ofb-text-top ').停止（真)。动画({top:'-110px'}) $(这个)。孩子们ofb-BG ').停止（真，真)。淡出()；})}))}))/脚本元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/headdydiv class=' grid 1k ' a href='/' class=' one _ fourth _ box fl ' div class=' of B- BG ' style=' display : none；/div div class=' ofb-img my png ' style=' top : 25px；img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' ofb-img-bottom mypng ' style=' top : 160 px；img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' of B- text ' style=' top 3360 25px；h5类='color_333 '节能/Saving/h5 p class='color_666 '玻璃窗是建筑物中隔热和保温最弱的环节日落景观。太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div div class=' ofb-text-top ' style=' top :-110 px；h5 class='color_orange '节能/Saving/h5 p class='color_999 '玻璃窗是建筑物中隔热和保温最弱的环节。

海景太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div/a a href='/' class=' one _ fourth _ box fl ' div class=' of B- BG ' style=' display : none；'/div class=' ofb-img my png ' style=' top : 25px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' ofb-img-bottom mypng ' style=' top : 160 px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' of B- text ' style=' top 3360 25px；'h5类='color_333 '节能/Saving/h5 p class='color_666 '玻璃窗是建筑物中隔热和保温最弱的环节日落景观。太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div class=' ofb-text-top ' style=' top :-110 px；'h5 class='color_orange '节能/Saving/h5 p class='color_999 '玻璃窗是建筑物中隔热和保温最弱的环节日落景观。太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div/a a href='/' class=' one _ fourth _ box fl ' div class=' of B- BG ' style=' display : none；'/div class=' ofb-img my png ' style=' top : 25px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' ofb-img-bottom mypng ' style=' top : 160 px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113025969。jpg ' width=' 118 ' height=' 78 ' alt=' '/div class=' of B- text ' style=' top 3360 25px；'h5类='color_333 '节能/Saving/h5 p class='color_666 '玻璃窗是建筑物中隔热和保温最弱的环节日落景观。太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div class=' ofb-text-top ' style=' top :-110 px；'h5 class='color_orange '节能/Saving/h5 p class='color_999 '玻璃窗是建筑物中隔热和保温最弱的环节日落景观。太阳隔热膜能使窗户增加隔热和保温性能，有助于增加舒适性/p/div/a a href='/' class=' B- r fl的四分之一_ box ' div class=' B- BG的' style=' display : none'/div class=' ofb-img my png ' style=' top : 25px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113741210。png ' alt=' '/div class=' of B- img-bottom my png ' style=' top : 160 px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113518952。png ' alt=' '/div class=' of B- text ' style=' top : 25px；'h5类='color_333 '移动互联网/h5 p class='color_666 '移动互联网：APP客户端开发，安卓、IOS、Winphone多平台支持/p/div class=' ofb-text-top ' style=' top :-110 px；'h5 class='color_orange '移动互联网/h5 p class='color_999 '移动互联网：手机网站建设、APP客户端开发，安卓、IOS、Winphone多平台支持/p/div/a a href='/' class=' one _ fourth _ box fl ' div class=' of B- BG ' style=' display : none；'/div class=' ofb-img my png ' style=' top : 25px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113138004。png ' alt=' '/div class=' of B- img-bottom my png ' style=' top : 160 px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810113033195。png ' alt=' '/div class=' of B- text ' style=' top : 25px；'h5类='color_333 '网站运维/h5 p class='color_666 '您多长时间更新一次网站？每天、每周还是半年.英国铁路公司网站运行的怎么样？给您带来收益了吗？英国铁路公司网站的运营与维护将决定网站的生命质量/p/div class=' of B- text-top ' style=' top :-110 px；'h5 class='color_orange '网站运维/h5 p class='color_999 '您多长时间更新一次网站？每天、每周还是半年.网站运行的怎么样？给您带来收益了吗？网站的运营与维护将决定网站的生命质量。

/p/div/a a href='/' class=' B- r fl的四分之一_ box ' div class=' B- BG的' style=' display : none'/div class=' ofb-img my png ' style=' top : 25px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810114041131。png ' alt=' '/div class=' of B- img-bottom my png ' style=' top : 160 px；'img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201508/2015810114120324。png ' alt=' '/div class=' of B- text ' style=' top : 25px；'h5类='color_333 '产品开发/h5 p class='color_666 '互联网功能性平台建设，定制化功能性网站产品销售/p/div class=' of B- text-top ' style=' top :-110 px；'h5 class='color_orange '产品开发/h5 p class='color_999 '互联网功能性平台建设，定制化网站产品开发服务/p/div/a/div div style=' text-align : center；清除： ' br/div/body/html希望本文所述对大家的jquery程序设计有所帮助。