编程 Javascript

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 相关文章推荐

Dom加载让图片加载完再执行的脚本代码

May 15 Javascript

菜鸟javascript基础资料整理3 正则

Dec 06 Javascript

javascript 面向对象封装与继承

Nov 27 Javascript

JS动态改变表格边框宽度的方法

Mar 31 Javascript

JavaScript实现数字数组按照倒序排列的方法

Apr 06 Javascript

Sequelize中用group by进行分组聚合查询

Dec 12 Javascript

JavaScript的六种继承方式(推荐)

Jun 26 Javascript

layui异步加载table表中某一列数据的例子

Sep 16 Javascript

js基础之事件捕获与冒泡原理

Oct 09 Javascript

vue中get请求如何传递数组参数的方法示例

Nov 08 Javascript

微信小程序实现弹框效果

May 26 Javascript

vue实现分页的三种效果

Jun 23 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