jquery右下角自動彈出可關閉的廣告層

2024-05-06 16:19:43

字體：大中小

來源：轉載

供稿：網友

jQuery實現右下角自動彈出可關閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實現。有需要的小伙伴可以參考下。

右下角彈出層后，會在一定時間后自動隱藏。

html代碼：

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="UTF-8">

<title>jquery右下角自動彈出關閉層</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 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;"> 一定時間后彈出層會自動隱藏

</div>

<div style="background-color:Silver; width:100%;height:150px;">計劃</div>

<div style="background-color:Aqua; width:100%;height:150px;">aaaa</div>

<div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div>

<div style="background-color:Green; width:100%;height:150px;">vevb.com</div>

<div style="background-color:Blue; width:100%;height:150px;">bbbb</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;">cccc</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 /></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>