jQuery响应鼠标的滑动式背景透明的说明效果

发布时间：2018-08-16 12:33:13 所属栏目：Asp教程来源：站长网

导读：这是一个非常棒的响应鼠标的、滑动式背景变色并且透明的文字说明效果，当然！肯定的！这里引用了 jQuery 插件，兼容性不用说了，IE系列浏览器和火狐、 Chrome 等都可以实现。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特

　　这是一个非常棒的响应鼠标的、滑动式背景变色并且透明的文字说明效果，当然！肯定的！这里引用了jQuery插件，兼容性不用说了，IE系列浏览器和火狐、Chrome等都可以实现。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>感应鼠标的滑动式图片说明效果_烈火网_Veryhuo.COM</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .box{ position:relative; width:320px; height:200px; overflow:hidden; background:#0088ff; } .note{ position:absolute; left:0; top:176px; width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#0F000000',endColorstr='#0F000000'); background:rgba(0,0,0,0.7); text-align:center; } .title{ display:block; width:100%; height:100%; font-size:18px; color:#ffffff; text-decoration:none; } span{ font-size:24px; color:#CC0000; } </style> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".note").hover(function(){ $(this).animate({top:'0'},"900"); },function(){ $(this).animate({top:'176px'},"900"); }); }); </script> </head> <body> <div class="box"> <img src="/uploads/common/images/wall_s8.jpg" alt="烈火网" width="320" height="200"> <div class="note"> <a href="#" class="title"><span>欢迎光临【烈火网】欢迎光临</span><br>烈火网（Veryhuo.COM）提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的站长学习平台。</a> </div> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!