如何制作浮动广告 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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JS PHP字符串截取函数实现原理解析
Aug 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使用SOAP调用.net的WebService数据
2013/11/12 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
如何用python整理附件
2018/05/13 Python
python绘制直线的方法
2018/06/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
自我评价的正确写法
2013/09/19 职场文书
自荐书模板
2013/12/19 职场文书
医院门卫岗位职责
2013/12/30 职场文书
美容院考勤制度
2014/01/30 职场文书
校庆接待方案
2014/03/18 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python