如何制作浮动广告 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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
Vue实现简单计算器
Jan 20 Vue.js
用javascript实现倒计时效果
Feb 09 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实现计数器方法小结
2015/01/05 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
一个javascript参数的小问题
2008/03/02 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
结束运行python的方法
2020/06/16 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
医院辞职信范文
2014/01/17 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
个人典型事迹材料
2014/12/30 职场文书
大学生团员个人总结
2015/02/14 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server