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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
基于mysql的论坛(2)
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Angular4 中常用的指令入门总结
2017/06/12 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python批量提取word内信息
2015/08/09 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
授权委托书怎么写
2014/09/25 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
财务会计实训报告
2014/11/05 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python