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提交表单 Form.js官方插件介绍
Mar 01 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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/01 无线电
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
AJAX的使用方法详解
2017/04/29 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
node后端服务保活的实现
2019/11/10 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
金鑫耀Java笔试题
2014/09/06 面试题
市级绿色学校申报材料
2014/08/25 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Golang日志包的使用
2022/04/20 Golang