快捷導(dǎo)航

jQuery 右下角滑動彈出可關(guān)閉重現(xiàn)層完整代碼

更新時間：2012年10月10日 22:42:20 作者：

經(jīng)?？吹骄W(wǎng)頁右下角有滑動彈出的廣告，這種效果可以使用jQuery彈出層實現(xiàn)。本實例使用jQuery實現(xiàn)右下角滑動彈出可關(guān)閉重現(xiàn)層

效果圖：

完整代碼如下：

<!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=utf-8" />  <title>jquery右下角滑動彈出可關(guān)閉重現(xiàn)層 博客園 計劃 教程</title> <meta name="keywords" content="m.fzitv.net"/> <style type="text/css"> *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;} #jihuaslide h2{ font-size:24px; text-align:center;font-family:"微軟雅黑";} #reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; cursor:pointer;border:1px solid #000;} </style> </head> <body> <div style="background-color:Green; width:100%;height:150px;">腳本之家</div> <div style="background-color:Red; width:100%;height:150px;">歡迎</div> <div style="background-color:Yellow; width:100%;height:150px;">hi</div> <div style="background-color:Silver; width:100%;height:150px;">計劃</div> <div style="background-color:Aqua; width:100%;height:150px;">博客園</div> <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div> <div style="background-color:Green; width:100%;height:150px;">jb51.net</div> <div style="background-color:Blue; width:100%;height:150px;">cnblogs</div> <div style="background-color:Olive; width:100%;height:150px;">歡迎光臨</div> <div style="background-color:Green; width:100%;height:150px;">A</div> <div style="background-color:Purple; width:100%;height:150px;">baidu.com</div> <div style="background-color:Green; width:100%;height:150px;">B</div> <div style="background-color:Lime; width:100%;height:150px;">hello</div> <div style="background-color:Orange; width:100%;height:150px;">Jihua</div> <div   class="wppm3vysvbp"   id="reshow">你快回來</div> <div   class="wppm3vysvbp"   id="jihuaslide"> <a href="javaScript:void(0)" id="close">關(guān)閉</a> <span style=" line-height:50px;">右下角滑動彈出可重現(xiàn)層m.fzitv.net</span> <h2>腳本之家 jquery教程</h2> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: