生活随笔
收集整理的這篇文章主要介紹了
jquery右下角自动弹出关闭层
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果體驗：http://keleyi.com/keleyi/phtml/jqtexiao/36.htm
右下角彈出層后，會在一定時間后自動隱藏。第一版本：http://www.cnblogs.com/jihua/archive/2012/10/10/youxiajiao.html
html代碼：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>jquery右下角自動彈出關閉層-柯樂義
</title><base target="_blank"/><meta name="keywords" content="keleyi.com" /><script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script><style type="text/css">* {margin: 0px;padding: 0px;}a {color:black;}#keleyislide {width: 300px;height: 200px;border: 1px solid #000;position: fixed;bottom: 2px;right: 2px;display: none;background-color: White;z-index:9999;}#keleyislide a {position: absolute;top: 8px;right: 8px;font-size: 12px;text-decoration: none;color: Blue;}#keleyislide 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;">keleyi.com
</div><div style="background-color:Red; width:100%;height:150px;">歡迎
</div><div style="background-color:Yellow; width:100%;height:150px;"><a href="http://keleyi.com/a/bjae/t5t54xly.htm">原文
</a> <a href="http://keleyi.com">首頁
</a> <a href="http://keleyi.com/keleyi/phtml/">特效庫
</a><a href="http://hovertree.com">HoverTree
</a> 一定時間后彈出層會自動隱藏</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;">hovertree.com
</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;">randomvisit
</div><div style="background-color:Purple; width:100%;height:150px;">jihua.cnblogs.com
</div><div style="background-color:Green; width:100%;height:150px;">B
</div><div style="background-color:Lime; width:100%;height:150px;">myslider
</div><div style="background-color:Orange; width:100%;height:150px;">Jihua
</div><div id="reshow">你快回來
</div><div id="keleyislide"><a href="javaScript:void(0)" id="close"?target="_self">關閉
</a><span style=" line-height:50px;">右下角滑動彈出可重現層
<br />keleyi.com
</span><h2>柯樂義 教程
</h2></div><script type="text/javascript">function Jihua_Cnblogs_Com() { $("#kel"+"eyislide").slideDown("slow"); $("#reshow").hide(); }function KeleyiAutoHide() { $("#ke"+"leyislide").slideUp("slow"); $("#reshow").show(); }$(document).ready(function () {setTimeout(function () {Jihua_Cnblogs_Com();}, 1000)setTimeout(function () { KeleyiAutoHide(); },9000)$("#close").click(function () {KeleyiAutoHide();})$("#reshow").mouseover(function () {Jihua_Cnblogs_Com(); //keleyi.com
})})</script>
</body>
</html> ?
前端資源：http://www.cnblogs.com/jihua/p/webfront.html
轉載于:https://www.cnblogs.com/jihua/p/autoslide.html
總結
以上是生活随笔為你收集整理的jquery右下角自动弹出关闭层的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
