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的初始化与对象构建之浅析
Apr 12 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
Vue双向绑定实现原理与方法详解
May 07 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你的验证码安全码?
2007/01/02 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python 监测文件是否更新的方法
2019/06/10 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Django通过json格式收集主机信息
2020/05/29 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
网络技术专业求职信
2014/02/18 职场文书
唐山大地震的观后感
2015/06/05 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang