页面广告（div）

最新推荐文章于 2024-07-01 14:21:38 发布

weixin_33873846

最新推荐文章于 2024-07-01 14:21:38 发布

阅读量158

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/loklook123/archive/2012/10/30/2746640.html

版权

1、首先（为解决IE浏览器差异）html头部必须加入代码：

<!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"  xml:lang="zh-CN" lang="zh-CN">

2、html代码：

<div id="ad">
   <div style="height:20px;text-align:right;margin-top:-20px;" >
       <a id="adClose" href="javascript:void(0)">
        <img style="border:none;width:20px;height:20px;" src="Images/close1.png">
       </a>
   </div>
   <img style="width:300px;height:250px;" src="Images/ad.gif" />
</div>
<div id="adtool">
    <a id="adtoolbtn" style="text-decoration:none;color:blue;" href="javascript:void(0)">重播</a>
    <img id="adtoolclose" style="width:20px;height:20px;" src="Images/close1.png" />
</div>

3、CSS样式：

/*********右下角广告窗口样式**********************/
#ad
{
    display:none;
    width:300px;
    height:250px;
    z-index:500px;
    bottom:0px;
    right:300px;
    position:fixed;
    background:#c3c3c3;
    box-shadow:5px 2px 6px #000;
}
/*********广告工具样式**********************/
#adtool
{
    width:20px;
    height:60px;
    position:fixed;
    bottom:50px;
    right:0px;
    background:#c3c3c3;
    display:none;
    text-align:center;
}

4、JS部分：

<script type="text/javascript" src="JS/jquery-1.7.js"></script>
<script type="text/javascript">

var tt;
$(document).ready(function(){
    //延时一秒打开底部广告窗口；
    setTimeout('showAd()', 1000);
    //注册广告窗口关闭按钮单击事件
    $("#adClose").click(function(){
        hideAd();
    });
    //注册侧边工具栏（重播）按钮
    $("#adtoolbtn").click(function(){
        showAd();
    });
    //注册侧边工具栏（关闭）按钮
    $("#adtoolclose").click(function(){
        $("#adtool").hide();
    });
})
//显示广告 并隐藏广告工具
function showAd()
{
    $("#ad").slideDown('slow');
    tt= setTimeout('hideAd()',20000);
    //关闭侧栏广告小按钮
    $("#adtool").hide();
}
//隐藏广告 并显示广告工具
function hideAd()
{
    //清除延时
    clearTimeout(tt);
    $("#ad").slideUp('slow');
    //打开侧栏广告小按钮
    $("#adtool").show();
}
</script>