无缝滚动支持xhtml标准其他__脚本特效_后台技术向上下左右飞飞Asp技术乐园

无缝滚动支持xhtml标准

时间： 2008-04-14 17:52:42　阅读次数：2661

无缝滚动支持xhtml标准

<!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>
<div id="demo" style="width:65px;height:30px;">
<img src="/images/logo.png" width="65" height="65" />
</div>
<div id="demo2" style="width:65px;height:30px;">
<img src="/images/logo.png" width="65" height="65" />
</div>
<div id="demo1" style="width:30px;">
<img src="/images/logo.png" width="65" height="65" />
</div>
<div id="demo3" style="width:30px;">
<img src="/images/logo.png" width="65" height="65" />
</div>
<script type="text/javascript">
<!--
String.prototype.format = function(){
var tmpStr = this;
var iLen = arguments.length;
for(var i=0;i<iLen;i++){
  tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmpStr;
}
function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

if (arguments.length == 1)
      return element;

elements.push(element);
  }
  return elements;
}
function IMarquee(){
function throwError(){alert("接口未实现：" + arguments[0]);}
this.Scroll = function(){throwError("Scroll");}
this.Clone = function(){throwError("Clone");}
}
function AbstractMarquee(){
IMarquee.apply(this);
var ref = this;
var timer = null;
var container = null;
var indexs = ["ContainerID", "Delay", "Amount", "Width", "Height"];
this.Amount = 1;
this.Delay = 30;
this.Width = 0;
this.Height = 0;
this.ContainerID = "";
this.Start = function(){
  clearTimer();
  timer = setInterval(ref.Scroll, ref.Delay);
}
this.Stop = function(){
  clearTimer();
}
this.Pause = function(){
  clearTimer();
}
this.Init = function(){
  container = $(this.ContainerID);
  if(container == null) {alert("无法找到id为{0}的对象,初始化失败。".format(this.ContainerID));return;};
  container.style.overflow = "hidden";
  if(this.Width > 0) container.style.width = this.Width + "px";
  if(this.Height > 0) container.style.height = this.Height + "px";
  this.Clone();
  this.AttachEvent();
  this.Start();
}
this.AttachEvent = function(){
  container.onmouseover = ref.Pause;
  container.onmouseout = ref.Start;
}
function clearTimer(){
  if(timer != null)clearInterval(timer);
}
function _Marquee(){
  var max = Math.min(indexs.length, arguments.length);
  for(var i=0;i<max;i++)
   this[indexs[i]] = arguments[i];
}
_Marquee.apply(this, arguments);
}
function MarqueeUp(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
  container.innerHTML = '<div>{0}</div><div>{0}</div>'.format(container.innerHTML);
}
this.Scroll = function(){
  with(container){
   if(scrollTop >= lastChild.offsetTop) scrollTop -= firstChild.offsetHeight;
   else scrollTop += ref.Amount;
  }
}
}
function MarqueeDown(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
  container.innerHTML = '<div>{0}</div><div>{0}</div>'.format(container.innerHTML);
  container.scrollTop = container.scrollHeight;
}
this.Scroll = function(){
  with(container){
   if(scrollTop <= firstChild.offsetTop) scrollTop += lastChild.offsetHeight;
   else scrollTop -= ref.Amount;
  }
}
}
function MarqueeLeft(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
  container.innerHTML = '<table cellspacing="0" cellpadding="0" border="0"><tr><td>{0}</td><td>{0}</td></tr></table>'.format(container.innerHTML);
}
this.Scroll = function(){
  with(container){
   if(scrollLeft >= firstChild.rows[0].cells[1].offsetLeft) scrollLeft -= firstChild.rows[0].cells[0].offsetWidth;
   else scrollLeft += ref.Amount;
  }
}
}
function MarqueeRight(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
  container.innerHTML = '<table cellspacing="0" cellpadding="0" border="0"><tr><td>{0}</td><td>{0}</td></tr></table>'.format(container.innerHTML);
  container.scrollLeft = container.scrollWidth;
}
this.Scroll = function(){
  with(container){
   if(scrollLeft <= firstChild.rows[0].cells[0].offsetLeft) scrollLeft += firstChild.rows[0].cells[1].offsetWidth;
   else scrollLeft -= ref.Amount;
  }
}
}
var Marquee = {
Type : {
  UP : function(){return new MarqueeUp(arguments[0]);},
  DOWN : function(){return new MarqueeDown(arguments[0]);},
  LEFT : function(){return new MarqueeLeft(arguments[0]);},
  RIGHT : function(){return new MarqueeRight(arguments[0]);}
},
newInstance : function(type, container){
  return this.Type[type.toUpperCase()].call(this, container);
}
}
var marquee = Marquee.newInstance("Up", "demo");
marquee.Init();
var m1 = Marquee.newInstance("Left", "demo1");
m1.Init();
var m2 = Marquee.newInstance("Down", "demo2");
m2.Init();
var m3 = Marquee.newInstance("Right", "demo3");
m3.Init();
//-->
</script>
</body>
</html>

提示：您可以先修改部分代码再运行