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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
js实现模糊匹配功能
Feb 15 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php获取操作系统语言代码
2013/11/04 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
js倒计时显示实例
2016/12/11 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python中MySQLdb模块用法实例
2014/11/10 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python3 爬取图片的实例代码
2018/11/06 Python
代码实例讲解python3的编码问题
2019/07/08 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python PIL模块的基本使用
2020/09/29 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python os.listdir()乱码解决方案
2021/01/31 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
初入社会应届生求职信
2013/11/18 职场文书
文案策划求职信
2014/04/14 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014年保管员工作总结
2014/11/18 职场文书
秋季运动会加油词
2015/07/18 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS