jQuery實(shí)現(xiàn)右下角自動彈出可關(guān)閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實(shí)現(xiàn)。有需要的小伙伴可以參考下。
右下角彈出層后，會在一定時間后自動隱藏。
html代碼：
<!DOCTYPE HTML>
<html xmlns="">
<head>
<meta charset="UTF-8">
<title>jquery右下角自動彈出關(guān)閉層</title><base target="_blank"/>
<script type="text/javascript" src="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>keleyi.com</div>
<div>歡迎</div>
<div> 一定時間后彈出層會自動隱藏
</div>
<div>計(jì)劃</div>
<div>aaaa</div>
<div>jihua</div>
<div>jb51.net</div>
<div>bbbb</div>
<div>歡迎光臨</div>
<div>randomvisit</div>
<div>cccc</div>
<div>B</div>
<div>myslider</div>
<div>Jihua</div>
<div id="reshow">你快回來</div>
<div id="keleyislide">
<a href="javaScript:void(0)" id="close" target="_self">關(guān)閉</a>
<span>右下角滑動彈出可重現(xiàn)層<br /></span>
</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(); })
})
</script>
</body>
</html>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。