`
ausdin
  • 浏览: 13009 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

    博客分类：
  • JS
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>
分享到：
| 获取查询次数最多的客户其最后一次的查询时 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用JS+CSS实现滚动表格数据展示

    "利用JS+CSS实现滚动表格数据展示"是一个常见的需求，它可以帮助用户逐行浏览大量的信息，而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要...

    js+实现+滚动的表格

    然后，我们用JavaScript来处理滚动事件，特别是当表格滚动到底部时，可以加载更多数据。这可以通过监听滚动事件 (`scroll` 事件) 来实现： ```javascript let tableContainer = document.querySelector('.table-...

    js无缝滚动demo

    JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用开发，包括实现动态内容、用户交互、页面行为以及数据处理等。在网页设计中，无缝滚动是一种常见的特效，可以为用户提供流畅的浏览体验，使得...

    一个网页多个js图片滚动

    在网页设计中，实现多个图片的自动左右滚动是一种常见的动态效果，可以提升用户体验，增加页面的视觉吸引力。这种效果通常通过JavaScript（JS）脚本来实现，因为JavaScript具有强大的交互性和实时性，能够处理用户与...

    原生js滚动到底部加载数据Scrollload.zip

    Scrollload 是一个无依赖、体积极小（压缩 gzip后不到3k）、可配置性高(可以自定义加载时候动画、加载完后的dom、提前加载的距离)、可扩展性强大（很方便做到指定容器内的滚动、多tab的滚动、异常处理、刷新重新加载...

    Js读取json数据实现滚动分页实例

    在处理数据展示时，滚动分页是一种常见的优化用户体验的方法，它允许用户在滚动页面时动态加载更多内容，而不是一次性加载所有数据。本实例将探讨如何使用JavaScript从JSON数据源中实现滚动分页功能。 首先，理解...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具，它使得图片展示更加生动有趣。在网页设计中，图片滚动通常用于展示多张图片，尤其是对于产品展示、新闻更新或者图片滑块等场景，能有效提升用户...

    图片滚动，文字滚动，图片横竖滚动，超好的横竖同时无缝隙滚动代码，js，滚动特效

    开发者可能需要创建一个包含多个子元素（图片）的容器，并控制这个容器在两个维度上的位置变化，以达到横竖双向滚动的视觉效果。 4. **无缝隙滚动**：无缝滚动是让滚动内容在到达终点后立即从起点重新开始，让用户...

    Ext中的Grid控制纵向滚动条单次滚动量

    Grid Panel由多个列（columns）和行（rows）组成，可以通过store来加载和管理数据。默认情况下，Grid Panel的滚动行为是由浏览器控制的，但通过Ext JS的API，我们可以对其进行自定义。 要控制Grid Panel的滚动条...

    js自定义滚动条插件

    默认的浏览器滚动条样式可能在不同的操作系统和浏览器中有所差异，因此，对于追求统一和精致界面的网站来说，使用JS自定义滚动条插件是必不可少的。 在提供的压缩包"scroll"中，可能包含以下内容： 1. **源码文件*...

    js ： 隐藏滚动条利用滚轴滚动

    这只是一个基础的实现，实际应用中可能需要处理更多细节，如滚动的平滑效果、边界判断等。 在提供的压缩包"隐藏滚动条 利用滚轴滚动示例"中，应该包含了一个实际的HTML和JavaScript文件，你可以打开它们查看完整的...

    数据滚动插件

    综上所述，数据滚动插件是现代Web开发中不可或缺的一部分，它通过高效的数据处理和优化的用户体验，使得海量数据的展示变得轻松且高效。在实际应用中，选择和配置合适的数据滚动插件对提升项目的整体性能至关重要。

    JS 控制GRIDVIEW 上下无间隙滚动

    综上所述，"JS控制GRIDVIEW上下无间隙滚动"是一个结合了JavaScript事件处理、DOM操作、CSS样式调整、分页和动态加载等多个技术点的实践案例。通过合理的代码设计和优化，可以为用户带来更流畅的滚动体验。在实际应用...

    JS自定义滚动条，可以自定义很多类型的网页滚动条

    在网页设计中，滚动条是不可或缺的一部分，尤其是在内容超过屏幕显示范围时。传统的滚动条样式通常是浏览器默认的，但随着Web开发技术的发展，开发者现在可以通过JavaScript实现自定义滚动条，以提升网页的用户体验...

    JS左右滚动方向可控

    总的来说，"JS左右滚动方向可控"是一个结合了DOM操作、事件处理和动画技术的JavaScript应用，它能够为用户提供更直观和灵活的浏览体验。通过熟练掌握这些技能，你可以创造出更多富有互动性的网页效果。

    JS模仿滚动条JS模仿滚动条

    这个过程涉及到CSS布局、JavaScript事件处理以及跨浏览器兼容性等多个方面的知识，是前端开发者必须掌握的一项技能。同时，随着Web技术的发展，例如Web Components和CSS Scroll Snap等新特性，未来在自定义滚动条...

    js 模拟滚动条js 模拟滚动条js 模拟滚动条

    总的来说，使用JavaScript模拟滚动条涉及到HTML布局、CSS样式和JavaScript事件处理等多个方面。虽然实现起来相对复杂，但能够带来更好的设计灵活性和用户体验。在实际项目中，可以参考现有的库，如Perfect Scrollbar...

    Jquery实现手机端上拉滚动加载更多数据

    总的来说，这个压缩包提供了一个完整的Jquery手机端上拉滚动加载更多数据的示例，涵盖了从HTML结构、CSS样式、JavaScript逻辑到数据处理的全部环节。开发者可以通过研究和修改这些文件来适应自己的项目需求。

    页面滚动到底部自动加载数据

    页面滚动到底部自动加载数据，也被称为无限...综上所述，实现“页面滚动到底部自动加载数据”涉及HTML5、JQuery、Ajax、分页策略、性能优化等多个方面。通过熟练掌握这些技术，可以创建一个无缝、高效的滚动加载体验。

    js两张图片并列循环滚动图片特效

    本项目名为“js两张图片并列循环滚动图片特效”，它提供了将两张（或更多）图片并列展示，并通过点击实现循环滚动的JavaScript解决方案。这种效果常用于产品展示、轮播广告等场景，使得页面更具视觉吸引力。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics