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的Pager分页器实现代码
Jul 17 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 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类
2006/11/27 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
PyQt5每天必学之单行文本框
2018/04/19 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
运动会解说词200字
2014/02/06 职场文书
运输服务质量承诺书
2014/03/27 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS