当前位置： 代码迷 >> JavaScript >> (原创) js 数据滚动 （可与此同时处理多个滚动区）
  详细解决方案

(原创) js 数据滚动 （可与此同时处理多个滚动区）

热度：256   发布时间：2012-08-24 10:00:21.0
(原创) js 数据滚动 （可同时处理多个滚动区）
单个滚动区的网上已经有很多的例子，今天这个适用于多个独立的滚动区

//滚动类
function Marquee(){
	this.ID = document.getElementById(arguments[0]);
    if (!this.ID) 
        return false;

	this.Direction = arguments[1];
	this.Step = arguments[2];
	this.Width = arguments[3];
	this.Height = arguments[4];
	this.Timer = arguments[5];
	this.WaitTime = arguments[6];
	this.StopTime = arguments[7];
	if(arguments[8]){
		this.ScrollStep = arguments[8];
	} else {
		this.ScrollStep = this.Direction>1? this.Width:this.Height;
	}
	this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
	this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
	this.ID.noWrap = true;
	this.ID.style.width = this.Width;
	this.ID.style.height = this.Height;
	this.ClientScroll = this.Direction>1? this.ID.scrollWidth:this.ID.scrollHeight;
	this.ID.innerHTML += this.ID.innerHTML;
	this.Start(this,this.Timer,this.WaitTime,this.StopTime);
  }
  
Marquee.prototype.Start = function(msobj,timer,waittime,stoptime){
	msobj.StartID = function(){
		msobj.Scroll();
	}
	
	msobj.Continue = function(){
		if(msobj.MouseOver == 1){
			setTimeout(msobj.Continue,waittime);
		}
		else{
			clearInterval(msobj.TimerID); 
			msobj.CTL = msobj.Stop = 0; 
			msobj.TimerID = setInterval(msobj.StartID,timer);
		}
	}
	
	msobj.Pause = function(){
		msobj.Stop = 1; 
		clearInterval(msobj.TimerID); 
		setTimeout(msobj.Continue,waittime);
	}
	
	msobj.Begin = function(){
		msobj.TimerID = setInterval(msobj.StartID,timer);
		msobj.ID.onmouseover = function(){
			msobj.MouseOver = 1; clearInterval(msobj.TimerID);
		}
		
		msobj.ID.onmouseout = function(){
			msobj.MouseOver = 0; 
			if(msobj.Stop == 0){
				clearInterval(msobj.TimerID); 
				msobj.TimerID = setInterval(msobj.StartID,timer);
			}
		}
	}
	setTimeout(msobj.Begin,stoptime);
}
  
Marquee.prototype.Scroll = function(){
	switch(this.Direction){
	case 0:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.WaitTime > 0){
			this.ID.scrollTop += this.ScrollStep+this.Step - this.CTL; this.Pause(); 
			return;
		} else {
			if(this.ID.scrollTop >= this.ClientScroll) 
				this.ID.scrollTop -= this.ClientScroll; 
			
			this.ID.scrollTop += this.Step;
		}
		break;
		
	case 1:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.WaitTime > 0){
			this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; this.Pause(); 
			return;
		} else {
			if(this.ID.scrollTop <= 0) 
				this.ID.scrollTop += this.ClientScroll; 
			
			this.ID.scrollTop -= this.Step;
		}
		break;
		
	case 2:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.WaitTime > 0){
			this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; 
			this.Pause(); 
			return;
		} else {
			if(this.ID.scrollLeft >= this.ClientScroll) 
				this.ID.scrollLeft -= this.ClientScroll; 
				
			this.ID.scrollLeft += this.Step;
		}
		break;
		
	case 3:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.WaitTime > 0){
			this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; 
			this.Pause(); 
			return;
		} else {
			if(this.ID.scrollLeft <= 0) 
				this.ID.scrollLeft += this.ClientScroll; 
				
			this.ID.scrollLeft -= this.Step;
		}
		break;
	}
}



<!-- 示例 -->
<script>
//调用
window.onload = function(){
	new Marquee(
		"cargo",  //容器ID<br />
		0,  //向上滚动(0向上 1向下 2向左 3向右)<br />
		7,  //滚动的步长<br />
		568,  //容器可视宽度<br />
		189,  //容器可视高度<br />
		40,  //定时器 数值越小，滚动的速度越快(1000=1秒,建议不小于20)<br />
		4000,  //间歇停顿时间(0为不停顿,1000=1秒)<br />
		3000,  //开始时的等待时间(0为不等待,1000=1秒)<br />
		189 //间歇滚动间距(可选)<br />
	);
	new Marquee(
		"vehicle",  //容器ID<br />
		0,  //向上滚动(0向上 1向下 2向左 3向右)<br />
		7,  //滚动的步长<br />
		568,  //容器可视宽度<br />
		189,  //容器可视高度<br />
		40,  //定时器 数值越小，滚动的速度越快(1000=1秒,建议不小于20)<br />
		5000,  //间歇停顿时间(0为不停顿,1000=1秒)<br />
		4000,  //开始时的等待时间(0为不等待,1000=1秒)<br />
		189  //间歇滚动间距(可选)<br />
	);
}
</script>

<style>
.vcInfo {
    width: 566px;
    height: 180px;
    min-height: 25px;
    line-height: 25px;
    border: #CCC 0px solid;
    overflow: hidden;
}
</style>

<div class="m_infos">
  <dl class="dl bgc_e9">        	
    <dt class="w280 pl10">出发地&nbsp;→&nbsp;到达地</dt>
    <dt class="w80">配货方式</dt>
    <dt class="w65">类型</dt>
    <dt class="w60">时间</dt>
    <dt class="w66">查看</dt>
  </dl> 
	 
  <ul id='cargo' class="vcInfo">     
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43719.html" target="_blank">
            青海省 海西自治州 市辖区 → 台湾
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43719.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43619.html" target="_blank">
            重庆市 市辖区 → 湖南省 郴州市 市辖区
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43619.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
        <a href="/dedecms/a/cargo/201110/43519.html" target="_blank">
          山东省 泰安市 市辖区 → 内蒙古区 通辽市 市辖区
        </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
        <a href="/dedecms/a/cargo/201110/43519.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43419.html" target="_blank">
            吉林省 延边自治州 市辖区 → 浙江省 温州市 市辖区
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43419.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
        <a href="/dedecms/a/cargo/201110/43319.html" target="_blank">
          重庆市 秀山县 → 广东省 汕尾市 市辖区
        </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43319.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43219.html" target="_blank">
            广西区 北海市 市辖区 → 广东省 珠海市 市辖区
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43219.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43119.html" target="_blank">
            河北省 保定市 安国市 → 广东省 深圳市 市辖区
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43119.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/43019.html" target="_blank">
            四川省 南充市 营山县 → 广西区 贺州市 钟山县
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/43019.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/42919.html" target="_blank">
            四川省 遂宁市 市辖区 → 安徽省 宿州市 灵璧县
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/42919.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
    <li>
      <dl class="dl">        	
        <dt class="w280 pl10">
          <a href="/dedecms/a/cargo/201110/42713.html" target="_blank">
            四川省 内江市 市辖区 → 海南省 海南直辖县 西沙群岛
          </a>
        </dt>
        <dt class="w80">不限</dt>
        <dt class="w65">设备</dt>
        <dt class="w60">10-13</dt>
        <dt class="w66">
          <a href="/dedecms/a/cargo/201110/42713.html" target="_blank">查看详细</a>
        </dt>
      </dl>
    </li>
  </ul>  
</div>
<div class="m_infos">
  <dl class="dl bgc_e9">        	
    <dt class="w280 pl10">出发地→到达地</dt>
    <dt class="w80">载重</dt>
    <dt class="w65">长度</dt>
    <dt class="w60">时间</dt>
    <dt class="w66">查看</dt>
  </dl> 
  <ul id='vehicle' class="vcInfo">     
	<li>
	  <dl class="dl">        	
		<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/44319.html" target="_blank">
        	辽宁省 鞍山市 市辖区 → 宁夏区 中卫市 市辖区
          </a>
		</dt>
        <dt class="w80">45 吨</dt>
        <dt class="w65">5 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/44319.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
      	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/44219.html" target="_blank">
        	山东省 泰安市 宁阳县 → 澳门
          </a>
        </dt>
        <dt class="w80">45 吨</dt>
        <dt class="w65">5 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/44219.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
       	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/44119.html" target="_blank">
        	山东省 日照市 市辖区 → 广东省 江门市 市辖区
          </a>
        </dt>
        <dt class="w80">45 吨</dt>
        <dt class="w65">5 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/44119.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
      	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/44019.html" target="_blank">
        	湖南省 郴州市 市辖区 → 湖北省 咸宁市 市辖区
          </a>
        </dt>
        <dt class="w80">23 吨</dt>
        <dt class="w65">2 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/44019.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
     	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/43919.html" target="_blank">
        	内蒙古区 呼伦贝尔市 市辖区 → 浙江省 台州市 市辖区
          </a>
		</dt>
        <dt class="w80">23 吨</dt>
        <dt class="w65">2 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/43919.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
     	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/43819.html" target="_blank">
        	青海省 玉树自治州 市辖区 → 广东省 江门市 市辖区
          </a>
        </dt>
        <dt class="w80">23 吨</dt>
        <dt class="w65">2 米</dt>
        <dt class="w60">10-19</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/43819.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
	<li>
      <dl class="dl">        	
      	<dt class="w280 pl10">
          <a href="/dedecms/a/vehicle/201110/42813.html" target="_blank">
        	广东省 茂名市 电白县 → 山东省 泰安市 宁阳县
          </a>
        </dt>
        <dt class="w80">31 吨</dt>
        <dt class="w65">3.5 米</dt>
        <dt class="w60">10-13</dt>
        <dt class="w66">
          <a href="/dedecms/a/vehicle/201110/42813.html" target="_blank">查看详细</a>
        </dt>
	  </dl>
	</li>
  </ul>
</div>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.