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 相关文章推荐
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
微信小程序收藏功能的实现代码
Jun 19 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之第一天
2006/10/09 PHP
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
物理系毕业生自荐书
2014/06/13 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js