浮动广告和对联.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>广告浮动</title>
</head>

<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<script type="text/javascript">
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:"http://www.dovapour.com.cn/",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'><img src='"+this.imgOptions.url+"' width="+this.imgOptions.width+" height="+this.imgOptions.height+" style='border:none;' /></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); 
 }
}
/*
对联广告调用
第一个参数为ID,第二个参数图片,第三个参数广告距离顶部的距离,
第四个参数表示左右(true代表左,false代表右),第五个参数对联广告的宽度
*/
new float_ad("ad_l","<img src='1.gif' />",50,true,64);
new float_ad("ad_r","<img src='2.gif' />",50,false,64);

/*
漂浮广告调用
第一个参数中的url代表漂浮广告的URL地址(必选项),width图片的宽度(可选项,默认120),heihgt图片的高度(可选项,默认120)
第二个参数中的代表漂浮广告的初始位置,由参数left和top指定
*/
new move_ad({url:"3.jpg",width:150,height:150},{left:40,top:160},30);
</script>
</body>
</html>

by 雪洁 2010-05-24 22:40:55 3770 views
我来说几句

下一篇: 好用的隐藏导航.html
上一篇: 放上显示相应的内容.html
相关文章
鼠标放到图片上慢慢变大，移开后图片又慢慢变小.html
鼠标放上去显示图片效果
图片随表格和浏览器的大小变化而变化
向上下滚动图片的特效 
右下角弹出广告代码
屏蔽鼠标右键
12种html播放器代码
浮动广告和对联.html
小日历
浮动广告

关于站长

站长QQ: 513569228 本博客旨在记录工作中遇到的问题，并为大家提供帮助,如有疑问可加群332646789，欢迎共同交流技术上的难题...

站内搜索
symfony循序渐进 symfony笔记 sonata-project vim git nginx mongodb redis jquery mac
文章分类
最新文章
最热文章