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>