幕布滑动下降效果可用于网站公告

发布时间：2018-08-21 16:17:59 所属栏目：交互来源：站长网

导读：经常看电影吧？那你肯定见过电影的幕布降落，不过我们很难去做这样的事情，本文讲的就是利用 jQuery 实现的一个类似幕布下降的效果，缓冲滑动效果，烈火网友情提示：本特效您可以用于网站的顶部公告栏。但是前提需要加载JQuery.js。 !DOCTYPE html PUBLIC

　　经常看电影吧？那你肯定见过电影的幕布降落，不过我们很难去做这样的事情，本文讲的就是利用jQuery实现的一个类似幕布下降的效果，缓冲滑动效果，烈火网友情提示：本特效您可以用于网站的顶部公告栏。但是前提需要加载JQuery.js。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>幕布滑动降落效果可用于网站公告 - liehuo.net</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #754c24; height: 200px; display: none; color:#FFF; padding:10px; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(http://www.veryhuo.com/uploads/allimg/091221/btn-slide.gif) no-repeat center top; } .btn-slide { background: url(http://www.veryhuo.com/uploads/allimg/091221/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> </head> <body> <div id="panel"> 公告：烈火网(liehuo.net)alexa排名即将突破3万<br /><br /> 烈火网(LieHuo.Net)消息以网页设计、WEB开发、网站运营与互联网新闻等为主要内容的烈火网，近日alexa世界排名三个月平均值达3.4万，直冲3万以内，据网站统计数据显示，目前烈火网整站所有频道IP总值最高日为4.2万，目前烈火网已经被国内多家著名的网址导航收录，在站长教程、网页开发等方面突显，在业界小有名气。 <br /><br /> 文章源自：烈火网，原文：http://www.veryhuo.com/a/view/11037.html  </div> <p class="slide"><a href="#" class="btn-slide">本站公告</a></p> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

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

幕布滑动下降效果 可用于网站公告

幕布滑动下降效果可用于网站公告