关注前端开发微信微信号web007007

jQuery实现右下角弹出广告

作者 管理员 发布时间 2012-06-03 16:37 文章分类 JavaScript, 前端资源 文章评论 抢沙发 阅读次数

许多网站都会在浏览器的右下角弹出广告。
这种效果用jQuery可以很容易的实现。代码只有几行。
不得不感叹jQuery的强大·····
js代码:

<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$("#ad").slideDown();
},1000)
$("#close").click(function(){
$("#ad").slideUp();
})
})
</script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
setTimeout(function(){
$("#ad").slideDown();
},1000)
$("#close").click(function(){
$("#ad").slideUp();
})
})
// ]]></script>

html代码:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;title&gt;<a href="http://www.web92.net/tag/jquery" title="查看 jQuery 中的全部文章" target="_blank">jQuery</a>实现右下角弹出广告-WEB前端开发最爱&lt;/title&gt;
&lt;/head&gt;

&lt;style&gt;
*{ margin:0px; padding:0px;}
#ad{ width:300px; height:200px; border:1px solid #000; position:absolute; bottom:0px; right:10px; display:none;}
#ad a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none;}
#ad h2{ font-size:24px; text-align:center; line-height:200px; font-family:&quot;微软雅黑&quot;;}
&lt;/style&gt;
&lt;body&gt;
&lt;div id=&quot;ad&quot;&gt;
&lt;a href=&quot;javaScript:void(0)&quot; id=&quot;close&quot;&gt;关闭&lt;/a&gt;
&lt;h2&gt;WEB前端开发最爱&lt;/h2&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

需要注意的是,要弹出的广告层的定位要用 position:absolute;或者 position:fixed。
但是IE6不支持fixed属性,所以这里采用position:absolute;

预览网址:http://www.web92.net/dom/2012-06-03-ad

下载地址:jQuery实现右下角弹出广告下载

下载密码:www.web92.net

本文固定链接: http://www.web92.net/258.html | WEB前端开发

该日志由 于2012年06月03日发表在 JavaScript, 前端资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery实现右下角弹出广告 | WEB前端开发
关键字: