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


Posted in Javascript onAugust 20, 2013

注释部分为广告的左右调节,可以自行设定

<!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>
Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
javaScript Array api梳理
Mar 31 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 #Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 #Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 #Javascript
jquery indexOf使用方法
Aug 19 #Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 #Javascript
没有document.getElementByName方法
Aug 19 #Javascript
js中符号转意问题示例探讨
Aug 19 #Javascript
You might like
PHP strtotime函数详解
2009/12/18 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
通信生自我鉴定
2014/01/18 职场文书
文艺晚会策划方案
2014/06/11 职场文书
给客户的检讨书
2014/12/21 职场文书
小学语文教学随笔
2015/08/14 职场文书