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判断、校验MAC地址的2个实例
May 05 Javascript
js数组依据下标删除元素
Apr 14 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php使用session二维数组实例
2014/11/06 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
浅析return false的正确使用
2013/11/04 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
SQLite3中文编码 Python的实现
2017/01/11 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python输出决策树图形的例子
2019/08/09 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python yield的用法实例分析
2020/03/06 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
学生宿舍管理制度
2014/01/30 职场文书
请假条怎么写
2014/04/10 职场文书
法学自荐信
2014/06/20 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
三八妇女节标语
2014/10/09 职场文书
公司2014年度工作总结
2014/12/10 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书