js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome


Posted in Javascript onNovember 26, 2009

/*
对联广告调用
第一个参数为ID,第二个参数图片,第三个参数广告距离顶部的距离,
第四个参数表示左右(true代表左,false代表右),第五个参数对联广告的宽度
*/
new float_ad("ad_l","<img src='/System/uploads/allimg/090504/2346400.gif' />",50,true,64);
new float_ad("ad_r","<img src='/System/uploads/allimg/090504/2346400.gif' />",50,false,64);

/*
漂浮广告调用
第一个参数中的url代表漂浮广告的图片URL地址(必选项),link链接到页面网址,alt图片提示文字,width图片的宽度(可选项,默认120),heihgt图片的高度(可选项,默认120)
第二个参数中的代表漂浮广告的初始位置,由参数left和top指定
第三个参数代表浮动速度,0为静止,越小浮动速度越快
*/
new move_ad({url:"/System/uploads/allimg/090504/2346400.gif",link:"https://3water.com",alt:"关于招募“2009中国·大连国际樱桃节”志愿者的通知",width:200,height:200},{left:40,top:160},20);

//核心代码 
function $(element){ 
if(arguments.length>1){ 
for(var i=0,elements=[],length=arguments.length;i<length;i++) 
elements.push($(arguments[i])); 
return elements; 
} 
if(typeof element=="string") 
return document.getElementById(element); 
else 
return element; 
} 
Function.prototype.bind=function(object){ 
var method=this; 
return function(){ 
method.apply(object,arguments); 
} 
} 
var Class={ 
create:function(){ 
return function(){ 
this.initialize.apply(this,arguments); 
} 
} 
} 
Object.extend=function(destination,resource){ 
for(var property in resource){ 
destination[property]=resource[property]; 
} 
return destination; 
} 
//对联广告类 
var float_ad=Class.create(); 
float_ad.prototype={ 
initialize:function(id,content,top,left,width){ 
document.write('<div id='+id+' style="position:absolute;">'+content+'</div>'); 
this.id=$(id); 
this.top=top; 
if(!!left){ 
this.id.style.left="8px"; 
}else{ 
this.id.style.left=(document.documentElement.clientWidth-width-8)+"px"; 
window.onresize=function(){ 
this.id.style.left=(document.documentElement.clientWidth-width-8)+"px"; 
}.bind(this); 
} 
this.id.style.top=top+"px"; this.interId=setInterval(this.scroll.bind(this),20); 
}, 
scroll:function(){ 
this.stmnStartPoint = parseInt(this.id.style.top, 10); 
this.stmnEndPoint =document.documentElement.scrollTop+ this.top; 
if(navigator.userAgent.indexOf("Chrome")>0){ 
this.stmnEndPoint=document.body.scrollTop+this.top; 
} 
if ( this.stmnStartPoint != this.stmnEndPoint ) { 
this.stmnScrollAmount = Math.ceil( Math.abs( this.stmnEndPoint - this.stmnStartPoint ) / 15 ); 
this.id.style.top = parseInt(this.id.style.top, 10) + ( ( this.stmnEndPoint<this.stmnStartPoint ) ? -this.stmnScrollAmount : this.stmnScrollAmount )+"px"; 
} 
} 
} 
//漂浮广告类 
var move_ad=Class.create(); 
move_ad.prototype={ 
initialize:function(imgOption,initPosition,delay){ 
this.imgOptions=Object.extend({url:"",link:"",alt:"",width:120,height:120},imgOption||{}); 
this.adPosition=Object.extend({left:40,top:120},initPosition||{}); 
this.delay =delay; 
this.step = 1; 
this.herizonFlag=true; 
this.verticleFlag=true; 
this.id="ad_move_sg"; 
var vHtmlString="<div id='"+this.id+"' style='position:absolute; left:"+this.adPosition.left+"px; top:"+this.adPosition.top+"px; width:"+this.imgOptions.width+"px;"; 
vHtmlString+=" height:"+this.imgOptions.height+"px; z-index:10;'><a href='"+this.imgOptions.link+"' target='_blank' title='"+this.imgOptions.alt+"'><img src='"+this.imgOptions.url+"' width='"+this.imgOptions.width+"' height='"+this.imgOptions.height+"' style='border:none;' alt='"+this.imgOptions.alt+"' /></a></div>"; 
document.write(vHtmlString); 
this.id=$(this.id); 
this.intervalId=setInterval(this.scroll.bind(this),this.delay); 
this.id.onmouseover=this.stop.bind(this); 
this.id.onmouseout=this.start.bind(this); 
}, 
scroll:function(){ 
var L=T=0; 
var B=document.documentElement.clientHeight-this.id.offsetHeight; 
var R=document.documentElement.clientWidth-this.id.offsetWidth; 
this.id.style.left=this.adPosition.left+document.documentElement.scrollLeft+"px"; 
this.id.style.top=this.adPosition.top+document.documentElement.scrollTop+"px"; 
this.adPosition.left =this.adPosition.left + this.step*(this.herizonFlag?1:-1); 
if (this.adPosition.left < L) { this.herizonFlag = true; this.adPosition.left = L;} 
if (this.adPosition.left > R){ this.herizonFlag = false; this.adPosition.left = R;} 
this.adPosition.top =this.adPosition.top + this.step*(this.verticleFlag?1:-1); 
if(this.adPosition.top <= T){ this.verticleFlag=true; this.adPosition.top=T;} 
if(this.adPosition.top >= B){ this.verticleFlag=false; this.adPosition.top=B; } 
}, 
stop:function(){ 
clearInterval(this.intervalId); 
}, 
start:function(){ 
this.intervalId=setInterval(this.scroll.bind(this),this.delay); 
} 
}
Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
JS随机密码生成算法
Sep 23 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 #Javascript
JS小框架 fly javascript framework
Nov 26 #Javascript
jquery.ui.progressbar 中文文档
Nov 26 #Javascript
javascript 面向对象继承
Nov 26 #Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 #Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 #Javascript
Ext grid 添加右击菜单
Nov 26 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php 数组的指针操作实现代码
2011/02/08 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中requests小技巧
2017/05/10 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python3 实现调用串口功能
2019/12/26 Python
Python的历史与优缺点整理
2020/05/26 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
大学旷课检讨书
2014/01/28 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
高中学生期末评语
2014/04/25 职场文书
车辆年审委托书范本
2014/09/18 职场文书
房屋授权委托书范本
2014/10/07 职场文书
护理自荐信
2019/05/14 职场文书
python munch库的使用解析
2021/05/25 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis