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 26 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JS实现公告上线滚动效果
Jan 10 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写的serv-u的web申请账号的程序
2006/10/09 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
react build 后打包发布总结
2018/08/24 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python字典改变value值方法总结
2019/06/21 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Python timeit模块原理及使用方法
2020/10/10 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
部队2015年终工作总结
2015/04/02 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python可视化学习之seaborn调色盘
2022/02/24 Python