JQuery 右下角广告窗体

原创于 2013-07-05 16:47:53 发布 · 964 阅读

1 ·

CC 4.0 BY-SA版权

JQuery_动画专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的固定位置广告弹窗案例。该广告会在页面加载后逐渐显示，并在指定时间后自动隐藏。文章通过具体代码展示了如何设置弹窗样式以及使用jQuery来控制其显示和隐藏的动画效果。

<!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>
<title></title>
<style type="text/css">
body{margin:0px;font-size:12px;}
#message
{
width:100px;
height:100px;
position:fixed;
background-color:gold;
right:0px;
bottom:0px;
display:none;
}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//注意slideDown是展开,slideUp是收起
$("#message").slideDown(2000, function () {
//$(this).slideUp(5000); //花5秒钟收起
setTimeout("$('#message').slideUp(5000);",2000) //用定时器等待两秒钟后收起,注意这里不能用$(this)，必须用ID取了
});
});
</script>
</head>
<body>
<div id="message">
我是广告，不好意思!!
</div>
</body>
</html>