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更改class和id的方法
Oct 10 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
js实现聊天对话框
Feb 08 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 md5下16位和32位的实现代码
2008/04/09 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
举例讲解Python中装饰器的用法
2015/04/27 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
vue路由实现登录拦截
2021/03/24 Vue.js
函授本科毕业自我鉴定
2013/10/09 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
国培计划培训感言
2014/03/11 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
材料物理专业求职信
2014/09/01 职场文书
骨干教师考核评语
2014/12/31 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
党员证明信
2015/06/19 职场文书
生活小常识广播稿
2015/08/19 职场文书
利用python进行数据加载
2021/06/20 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis