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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
js实现双人五子棋小游戏
May 28 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Python 实现集合Set的示例
2020/12/21 Python
python中yield的用法详解
2021/01/13 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
产品销售员岗位职责
2013/12/18 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
单位作风建设自查报告
2014/10/23 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
win7配置本地ftp服务器的图文教程
2022/08/05 Servers