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 闭包究竟是什么
Apr 12 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
require.js的用法详解
Oct 20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 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:风雨欲来 路在何方?
2006/10/09 PHP
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue axios登录请求拦截器
2018/04/02 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
javascript操作向表格中动态加载数据
2020/08/27 Javascript
python实现的防DDoS脚本
2011/02/08 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
大学学习计划书范文
2014/05/02 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫