JavaScript实现网页上的浮动广告的简单方法


Posted in Javascript onJune 14, 2013

漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋。除了普通的Gif Banner、Flash外,浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用。不过,如果你能善用的话,它就能发挥出极大的作用。

要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下载一个特效工具,按提示粘贴一下代码就OK。不过,想要真正了解它是怎样做出来的,则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。

以下这段代码可放在<body></body>之间,其间我加入了一些注释(即“//”后的文字及“<!—”“-->”之间的文字)。

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">

 initAd();//载入页面后,调用函数initAd()

 </SCRIPT>

 <script language="JScript">

 <!--

 function initAd() {

 document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后,广告层相对于固定后的y方向位置

 document.all.AdLayer.style.visibility = visible//设置层为可见

 MoveLayer(AdLayer);//调用函数MoveLayer()

 }

 function MoveLayer(layerName) {

 var x = 600;//浮动广告层固定于浏览器的x方向位置

 var y = 300;//浮动广告层固定于浏览器的y方向位置

 var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;

 var y = document.body.scrollTop + y - diff;

 eval("document.all." + layerName + ".style.posTop = y");

 eval("document.all." + layerName + ".style.posLeft = x");//移动广告层

 setTimeout("MoveLayer(AdLayer);", 20);//设置20毫秒后再调用函数MoveLayer()

 }

 //-->

 </script>

 <!--下面为一个ID为AdLayer的层(如ID名不为AdLayer,上面MoveLayer()内的AdLayer也要作相应修改),包括一张带链接的图片-->

 <div id=AdLayer style=position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px> 

 <a href="https://3water.com"><img src=../qqkk2000.gif border="0" height="60" width="60"></a> 

 </div>

在这里,你可以设置x、y的值来设定所固定层的位置,改变setTimeout("MoveLayer(AdLayer);", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是,使用的图片最好为透明背景的gif图,以使图片的背景颜色不至于遮住后面的的内容。

切记,要慎用浮动式广告,考虑使用特效的同时,千万要考虑到浏览者的感觉,不能滥用哦!

Javascript 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
jquery不常用方法汇总
Jul 26 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 #Javascript
JQuery 操作/获取table具体代码
Jun 13 #Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 #Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 #Javascript
jQuery插件的写法分享
Jun 12 #Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 #Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 #Javascript
You might like
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
有关Python的22个编程技巧
2018/08/29 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python全栈知识点总结
2019/07/01 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python列表list操作相关知识小结
2020/01/29 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
广告创意求职信
2014/03/17 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python