如何制作浮动广告 JavaScript制作浮动广告代码


Posted in Javascript onDecember 30, 2012

如果有一定的JavaScript基础,制作浮动广告还是比较容易的。直接上代码了:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
#csdn 
{ 
width:800px; 
margin:0 auto; 
} 
#ad 
{ 
position:absolute; 
right:0px; 
top:30px; 
z-index:1; 
} 
#cl 
{ 
position:absolute; 
right:0px; 
top:30px; 
z-index:2; 
} 
</style> 
<script type="text/javascript"> 
var advInitTop=30; 
var closeInitTop=30; 
function inix() 
{ 
advInitTop=document.getElementById("ad").style.pixelTop; 
closeInitTop=document.getElementById("cl").style.pixelTop; 
} 
function closeAd() 
{ 
document.getElementById("ad").style.display="none"; 
document.getElementById("cl").style.display="none"; 
} 
function move() 
{ 
//document.getElementById("ad").style.pixelTop=document.body.scrollTop+advInitTop; 
//document.getElementById("cl").style.pixelTop=document.body.scrollTop+closeInitTop; 
document.getElementById("ad").style.pixelTop=document.documentElement.scrollTop+advInitTop; 
document.getElementById("cl").style.pixelTop=document.documentElement.scrollTop+closeInitTop; 
//alert(document.getElementById("ad").style.pixelTop); 
window.status=document.documentElement.scrollTop+"/"+document.getElementById("ad").style.pixelTop; 
} 
window.onscroll=move; 
</script> 
</head> 
<body> 
<div id="cl" onclick="closeAd()"> 
<img src="images/close.jpg" /> 
</div> 
<div id="csdn"> 
<a href="http://www.csdn.net"><img src="images/xiaojie1.jpg" border="0" /></a> 
</div> 
<div id="ad"> 
<a href="http://www.taobao.com"><img src="images/advpic.gif" /></a> 
</div> 
</body> 
</html>

要点
上述代码中要用document.documentElement ,不要用老的document.body,否则,不符合w3c标准,看不到浮动效果!
Javascript 相关文章推荐
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
Javascript中的delete介绍
Sep 02 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 #Javascript
javascript中的缓动效果实现程序
Dec 29 #Javascript
通过正则格式化url查询字符串实现代码
Dec 28 #Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 #Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 #Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 #Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
You might like
php str_pad 函数用法简介
2009/07/11 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python判断是空的实例分享
2020/07/06 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
机电一体化职业规划书
2014/01/07 职场文书
工作经历证明书范文
2014/11/02 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
用Python生成会跳舞的美女
2022/01/18 Python