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表单验证框架的方法
Sep 14 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
JS实现扫雷项目总结
May 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
如何做到多笔资料的同步
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
php 小乘法表实现代码
2009/07/16 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
英文导游欢迎词
2014/01/11 职场文书
小学生演讲稿
2014/01/12 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
拾金不昧表扬信
2015/01/16 职场文书
护士求职自荐信范文
2015/03/04 职场文书
单位实习介绍信
2015/05/05 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书