js 左右悬浮对联广告代码示例


Posted in Javascript onDecember 12, 2014

一段js 左右悬浮广告代码,只要修改广告图片地址与连接地址,相应参数根据页面调整下就可以使用这段左右悬浮广告代码了

代码:

var delta=0.15
 var collection;
 function floaters() {
 this.items = ;
 this.addItem = function(id,x,y,content)
   {
   document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
   
   var newItem  = {};
   newItem.object  = document.getElementById(id);
   newItem.x  = x;
   newItem.y  = y;
   this.items[this.items.length] = newItem;
   }
 this.play = function()
   {
   collection  = this.items
   setInterval('play()',10);
   }
 }
 function play()
 {
  for(var i=0;i<collection.length;i++)
  {
  var followObj = collection[i].object;
  var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
  var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
  if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
   var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
   dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
   followObj.style.left=followObj.offsetLeft+dx;
   }
  if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
   var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
   dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
   followObj.style.top=followObj.offsetTop+dy;
   }
  followObj.style.display = '';
  }
 } 
 
 var theFloaters = new floaters();
 theFloaters.addItem('followDiv1','document.body.clientWidth-112',230,'<a href=左链接地址 target=_blank><img src=左图片地址 border=0></a>');
 theFloaters.addItem('followDiv2',12,230,'<a href=右链接地址 target=_blank><img src=右图片地址 border=0></a>');
 theFloaters.play();

另存为*.js文件,在页面中引用:<script src="*.js"></script>调用即可,*代表你另存的文件名!
注意:修改广告图片地址和连接地址!相应的参数可以根据页面自行调整。

Javascript 相关文章推荐
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js实现3D图片展示效果
Mar 09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 #Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 #Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 #Javascript
js使用递归解析xml
Dec 12 #Javascript
做web开发 先学JavaScript
Dec 12 #Javascript
You might like
php中{}大括号是什么意思
2013/12/01 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
python中的sort方法使用详解
2014/07/25 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python实现微信自动回复功能
2018/04/11 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python学习之time模块的基本使用
2021/01/17 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
葬礼司仪主持词
2014/03/31 职场文书
期末评语大全
2014/05/04 职场文书
员工安全承诺书
2014/05/22 职场文书
暑期培训心得体会
2014/09/02 职场文书
工程承包协议书范本
2014/09/29 职场文书
公司员工离职证明书
2014/10/04 职场文书
2015年党员自评材料
2014/12/17 职场文书
白鹤梁导游词
2015/02/06 职场文书
调任通知
2015/04/21 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python