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 读取和设置文档元素的样式属性
Apr 14 Javascript
Js sort排序使用方法
Oct 17 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
浅析JavaScript中的变量提升
Jun 01 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php类中private属性继承问题分析
2012/11/01 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
微信小程序入门教程
2016/11/18 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python入门篇之数字
2014/10/20 Python
python 系统调用的实例详解
2017/07/11 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
《学会待客》教学反思
2014/02/22 职场文书
运动会口号16字
2014/06/07 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
企业员工辞职信范文
2015/05/12 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js