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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
javascript使用call调用微信API
Dec 15 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
eslint 的三大通用规则详解
May 16 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
Js类的构建与继承案例详解
Sep 15 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 魔术方法使用说明
2009/10/20 PHP
openPNE常用方法分享
2011/11/29 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php文件上传类的分享
2017/07/06 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
介绍一下linux的文件权限
2014/07/20 面试题
师范应届生教师求职信
2013/11/05 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
心术观后感
2015/06/11 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
pt-archiver 主键自增
2022/04/26 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL