如何制作浮动广告 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 replace方法与正则表达式
Feb 19 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
vue实现登录拦截
Jun 29 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实现通用alert函数的方法
2015/03/11 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python模块如何查看
2020/06/16 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
新教师工作感言
2014/02/16 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
法定授权委托证明书
2014/09/27 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
平遥古城导游词
2015/02/03 职场文书
保研推荐信范文
2015/03/25 职场文书
2016年国陪研修感言
2015/11/18 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书