你好,游客 登录 注册 搜索
背景:
阅读新闻

js接口继承和重载实现的上下左右方向无缝滚动

[日期:2007-06-05] 来源:蓝色理想  作者: [字体: ]

<!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="http://blogbeta.blueidea.com/no-pic5.jpg" width="65" height="65" />
</div>
<div id="demo2" style="width:65px;height:30px;">
<img src="http://blogbeta.blueidea.com/no-pic5.jpg" width="65" height="65" />
</div>
<div id="demo1" style="width:30px;">
<img src="http://blogbeta.blueidea.com/no-pic5.jpg" width="65" height="65" />
</div>
<div id="demo3" style="width:30px;">
<img src="http://blogbeta.blueidea.com/no-pic5.jpg" 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>

收藏 推荐 打印 | 录入:木鸟 | 阅读:
相关新闻      
本文评论   查看全部评论 (1)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 1 楼
* 匿名 发表于 2008-10-13 17:37:36
也运行不了啊
热门评论
* 匿名 发表于 2008-10-13 17:37:36
也运行不了啊