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使用prototype定义对象类型(转)[
Dec 22 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
Jquery倒计时源码分享
May 16 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
如何利用node转发请求详解
Sep 17 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
原生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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php短信接口代码
2016/05/13 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python常用的json标准库
2019/02/19 Python
python面试题小结附答案实例代码
2019/04/11 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
2014大学辅导员工作总结
2014/12/02 职场文书
放射科岗位职责
2015/02/14 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书