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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
推荐dojo学习笔记
Mar 24 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
alert和confirm功能介绍
May 21 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
图解js图片轮播效果
Dec 20 Javascript
javascript对象的相关操作小结
May 16 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
微信小程序实现图片压缩
Dec 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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
摘自启点的main.js
2008/04/20 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python3 replace()函数使用方法
2018/03/19 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python join方法使用详解
2019/07/30 Python
Django缓存Cache使用详解
2020/11/30 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
总经理助理的八要求
2013/11/12 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
导游词之井冈山
2019/11/20 职场文书