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文件Cookie存取值示例代码
Feb 20 Javascript
javascript自定义的addClass()方法
May 28 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
React中的render何时执行过程
Apr 13 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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(3)
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
原生js实现随机点名
2020/07/05 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python复制文件操作实例详解
2015/11/10 Python
python+opencv实现动态物体识别
2018/01/09 Python
python在不同条件下的输入与输出
2020/02/13 Python
项目资料员岗位职责
2013/12/10 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
母校寄语大全
2014/04/10 职场文书
班级心理活动总结
2014/07/04 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python