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 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
vue vant中picker组件的使用
Nov 03 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
yii框架搜索分页modle写法
2016/12/19 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
javascript new fun的执行过程
2010/08/05 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
node内置调试方法总结
2018/02/22 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python descriptor(描述符)的实现
2020/11/15 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
开业庆典主持词
2014/03/21 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
入党现实表现材料
2014/12/23 职场文书
费用申请报告范文
2015/05/15 职场文书
大学生入党自传2015
2015/06/26 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python