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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue组件化开发思考
Feb 02 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
将php数组输出html表格的方法
2014/02/24 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
简述JS控制台的使用
2018/07/15 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
介绍Python中几个常用的类方法
2015/04/08 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python自动zip压缩目录的方法
2015/06/28 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python3开发环境搭建详细教程
2020/06/18 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
大二自我鉴定范文
2013/10/05 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
消防标语大全
2014/06/07 职场文书
物理教育专业求职信
2014/06/25 职场文书
员工趣味活动方案
2014/08/27 职场文书
今日说法观后感
2015/06/08 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers