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

最新推荐文章于 2023-02-20 20:19:59 发布
最新推荐文章于 2023-02-20 20:19:59 发布
阅读量279 收藏 1
点赞数
分类专栏： JS 文章标签： js 数据滚动 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_10492/article/details/82172350
版权
单个滚动区的网上已经有很多的例子，今天这个适用于多个独立的滚动区 


//滚动类
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">出发地 → 到达地</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>


iteye_10492
关注
专栏目录
js数据向上翻滚_数据滚动
10-30
方便做一些问题提交等宣传效果，多用于文字滚动
用原生JavaScript 实现可滚动视图区域
Augur1212的博客
01-29 571
这个效果本来是移动端上的效果（不想改了，有点懒），如果想修改成移动端效果 ，只需要修改按下 、拖动、抬起的值就行 实现效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
js如何实现两个滚动条同步滚动
weixin_44840212的博客
06-27 9134
如下图所示：实现两个区域竖向滚动条同步滚动 页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以） 下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算 注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度） clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属...
tweenMax多个一起运动
yhwcool的博客
09-21 958
staggerFromTo函数 staggerFrom函数 staggerTo函数 cycle: {  //多个操作 循环等      x: [100,200,300] } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&am
js实现无限滚动 滚动到底部加载新数据
zhangzuruiqqq的博客
04-16 569
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link rel=
原生JS控制多个滚动条同步跟随滚动效果
10-18
本文将详细介绍使用原生JavaScript实现多个滚动条同步跟随滚动效果的方法和原理。 首先，要实现滚动条同步滚动的效果，需要掌握JavaScript中与滚动相关的DOM属性和事件监听器。最核心的属性是`scrollTop`，它表示...
react-multiple-scrolls:用于一起滚动多个可滚动内容
05-15
`react-multiple-scrolls` 是针对React框架设计的组件，其主要目标是提供一种简单的方式，使得多个滚动容器能够同步它们的滚动行为。这通过监听滚动事件并计算滚动比例来实现，确保各个滚动条在用户交互时保持一致的...
JavaScript实现无穷滚动加载数据
10-19
父元素`main`下有多个类名为`box`的`div`，每个`box`中包含一个`pic`。 在实际的滚动加载逻辑中，当`checkScrollSlide`函数返回`true`时，会通过JavaScript动态创建新的数据块，并将数据插入到页面中。例如，通过`...
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错...
不同DIV滚动条如何同步？
weixin_30470857的博客
08-24 108
$(".DIV").scroll(function(){ $(".target").scrollLeft($(".DIV ").scrollLeft()); }); $(".m-h430").scroll(function(){ $(".tabZqtabX").scrollLeft($(".m-h430").scrollLeft()); }); 转载于:https://www....
基于jQuery实现滚动刷新效果
11-27
Jquery实现简单的滚动刷新效果： 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文： <form id="form1" runat="server"> <div xss=removed> </div> </form> Javascript操作代码： $(document).ready(function() { $(window).scroll(function() { //$(document).scrollTop() 获取垂直滚动的距离:最小值为0，最大值：文档高度-
两个div 同步滚动 兼容safari
weixin_30536513的博客
07-17 149
<style type="text/css"> div{ overflow-x:scroll; width:10%; height:10%; border:1px blue solid; position:relative; } </style> &lt...
div同步滚动js
xuelang532777032的博客
06-03 846
无标题文档 111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232222222222222222222222222222222222222 1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98
原生js实现滚动加载更多数据
yangyanqin2545的博客
06-14 2094
原生js实现滚动加载更多数据
js实现列表数据的滚动展示
最新发布
admin_body的博客
02-20 2157
js实现列表数据的滚动展示
js 实现两栏同时滚动
TF16949的博客
05-11 388
这个需求有点意思，拿出来和大家分享一下。如果你去实现过这样的效果，或者类似这样的效果的，你会发现简单去 一栏控制另一栏的的滚动距离，另一栏类似控制第一栏的效果的话。你会发现基本上可能滚动不了，优化之后通过函数节流，等其他手段优化之后也是很卡，滚动会不流畅。原因主要是因为当你改变一个元素的scrollTop 或者 scrollLeft值的时候这个时候会触发scroll事件，这样两边一种循环...
原生JS控制多个滚动条同步跟随滚动
热门推荐
Quiet-Night的博客
12-21 1万+
原生JS控制多个滚动条同步跟随滚动
页面实时刷新的同时，并横向滚动显示数据
YLiu77的博客
03-25 1794
当页面不需要实时刷新时，滚动显示数据，例如对li里面的数据进行滚动显示，直接使用jquery的appendTo()方法，然后在外面定义时间间隔来执行，这里可以实现横向纵向的滚动显示，代码如下： setInterval(function() { $('.header-list > li:first').appendTo($('.header-list')); }, 2000) 当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值