网页中可关闭的漂浮窗口实现可自行调节

 更新时间:2013年08月20日 15:19:36   作者:  
广告式的漂浮窗口,想必大家并不陌生吧,下面为大家简单介绍下具体的实现,有需要的朋友可以参考下
注释部分为广告的左右调节,可以自行设定
复制代码 代码如下:

<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>

<body style="background-color:#09C">
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">关闭</font><br/>
点击这里,关闭广告!!!<br><a href="/jscss/"><img src="img/ads1.png"></a>
</div>
<script type="text/javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
//adst.left = ( bodyfrm.clientWidth -155) + "px";
function moveR()
{
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
//adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:1200px;"></div>
</body>
</html>

相关文章

  • bootstrap模态框远程示例代码分享

    bootstrap模态框远程示例代码分享

    这篇文章主要为大家详细介绍了bootstrap模态框远程示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 解析img图片没找到onerror事件 Stack overflow at line: 0

    解析img图片没找到onerror事件 Stack overflow at line: 0

    本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • knockoutjs模板实现树形结构列表

    knockoutjs模板实现树形结构列表

    这篇文章主要介绍了knockoutjs模板实现树形结构列表的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • JS中window.open全屏命令解析及使用示例

    JS中window.open全屏命令解析及使用示例

    window.open想必大家对它并不陌生吧,那么如何让它全屏就有些朋友不知道了,下面为大家介绍下其常用的命令及如何全屏
    2013-12-12
  • Javascript动画效果(2)

    Javascript动画效果(2)

    这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS实现HTML标签转义及反转义

    JS实现HTML标签转义及反转义

    本文主要介绍了JS实现HTML标签转义及反转义的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 屏蔽网页右键复制和ctrl+c复制的js代码

    屏蔽网页右键复制和ctrl+c复制的js代码

    解决的方法就是直接把网页保存下来然后删掉下面这段js代码,然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题
    2013-01-01
  • js canvas实现二维码和图片合成的海报

    js canvas实现二维码和图片合成的海报

    这篇文章主要为大家详细介绍了js canvas实现二维码和图片合成的海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • echarts实现词云自定义形状的示例代码

    echarts实现词云自定义形状的示例代码

    这篇文章主要介绍了echarts实现词云自定义形状的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 如何通过vscode运行调试javascript代码

    如何通过vscode运行调试javascript代码

    这篇文章主要介绍了如何通过vscode运行调试javascript代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论