js实现div自动滚动

最新推荐文章于 2024-07-26 03:34:02 发布
最新推荐文章于 2024-07-26 03:34:02 发布
阅读量741 收藏 1
点赞数
分类专栏： 文章摘录 html 文章标签： 前端 javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldz0414/article/details/84432812
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现div自动滚动</title>
<script type="text/javascript">
	function startmarquee(lh, speed, delay) {
		var t;
		var oHeight = 300;/** div的高度 **/　
		var p = false;
		var o = document.getElementById("show");
		var preTop = 0;
		o.scrollTop = 0;
		function start() {
			t = setInterval(scrolling, speed);
			o.scrollTop += 1;
		}
		function scrolling() {
			if (o.scrollTop % lh != 0
					&& o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) {
				preTop = o.scrollTop;
				o.scrollTop += 1;
				if (preTop >= o.scrollHeight || preTop == o.scrollTop) {
					o.scrollTop = 0;
				}
			} else {
				clearInterval(t);
				setTimeout(start, delay);
			}
		}
		setTimeout(start, delay);
	}
	window.onload=function(){
		/**startmarquee(一次滚动高度,速度,停留时间);**/　　
		startmarquee(20, 20, 1500);
	}

</script>
</head>

<body>

	<div id="show"
		style="height: 300px; overflow-y: scroll; overflow-x: scroll;">
		<table width="100%" border="1px" cellspacing="0px"
			style="border-collapse: collapse">
			<thead>
				<tr>
					<td style="background: blue" width="10%">AAA</td>
					<td style="background: blue" width="20%">BBB</td>
					<td style="background: blue" width="50%">CCC</td>
					<td style="background: blue" width="10%">DDD</td>
					<td style="background: blue" width="">DDD</td>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
				<tr>
					<td>AAA</td>
					<td>BBB</td>
					<td>CCC</td>
					<td>DDD</td>
					<td>DDD</td>
				</tr>
			</tbody>
		</table>
		<div>
</body>
</html>
ldz0414
关注
专栏目录
js 实现 div的自动滚动
03-31
js 实现 div的自动滚动! 值得下载看看!资源免费,大家分享!!
Javascript实现DIV滚动自动滚动到底部的代码
01-21
查询了一下相关的资料，Div没有自动滚动的属性，只能模拟鼠标的滚动来现实想要的效果。 关键的部分部分在这里：div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码： 代码如下: <html> <body>...
JS实现div的自动滚动
melland好久不来
10-07 488
用JS实现div的自动滚动。代码如下： &lt;div id="show" style="overflow:hidden;height:210px;"&gt; &lt;/div&gt; &lt;script&gt; function startmarquee(lh,speed,delay){ var t; var oHeight = 210; /** div的高度 **/ var p...
jquery div 内容自动滚动
最新发布
weixin_40350013的博客
07-26 57
jQuery实现div内容自动滚动 作为一名经验丰富的开发者，我很高兴能为你提供帮助。在这篇文章中，我将向你介绍如何使用jQuery实现div内容的自动滚动。这将使你能够创建一个动态且引人入胜的网页效果。 流程图 首先，让我们通过一个流程图来了解实现div内容自动滚动的整个流程： #render_12_3528509687...
div自动滚动
weixin_53545517的博客
07-07 370
【代码】div自动滚动。
div定时动态滚动列表
qq_39520338的博客
12-11 962
示例 每3秒列表向下滚动一行，每行高度为32，触底或触顶后自动反向滚动! 以下为调用方法 autoScroll(32,32,3000,document.getElementById('hyjbqk')); /** * stepLength：一次滚动步长 * speed：滚动速度 * delay：停留时间 * element：Element对象 * * element.offsetHeight 元素的像素高度（包括边框和填充） * el
JS实现div自动滚动
weixin_33863087的博客
06-04 1484
用JS实现div的自动滚动。代码如下： 1<div id="show" style="overflow:hidden;height:210px;">　2</div>　3<script>　4function startmarquee(lh,speed,delay){　　5　　var t;　　6　　var oHeight = 210; /**//** div的高...
JS实现div内部的文字或图片自动循环滚动代码
10-27
在本示例中，我们将详细探讨如何使用JS来实现div内部的文字或图片的自动循环滚动。 首先，我们创建了一个CSS样式，定义了两个类：`.content` 和 `dl`。`.content` 是包含滚动内容的div，设置了宽度、高度、位置以及...
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
09-01
在网页开发中，有时我们需要实现一个功能，使得页面中的某个具有滚动条的div元素自动滚动到最底部，以便用户能够即时查看新加载的内容，比如在实时聊天应用中。本文将介绍三种实现这一功能的方法。 方法一：使用锚...
Vue3 div自动滚动
weixin_43896125的博客
03-12 520
vue3 div自动滚动。
js实现自动滚动
学敲代码的Stars的博客
12-20 3075
js实现自动滚动，再也不用求swiper组件啦。
【网页】div自动滚动效果实现
06-23
一个简单的网页示例，可以直接在浏览器中打开查看效果，然后查看源文件看到源码，对初级网页设计学习有所帮助
js 实现div里面的内容滚动，并可以通过按钮控制
03-21
NULL 博文链接：https://yangpanwww.iteye.com/blog/984155
js图片自动滚动
06-13
javascript做好的图片自动滚动，网上很多代码用不了 且行且珍惜
css实现div内文字自动滚动
qq_40516010的博客
08-16 2206
网上找了好久，终于找到了个能实现的，把它整理一下。需求：表格内字体过长实现自动滚动。
div 自动上下滚动效果
张君玉的博客
01-11 4732
自动上下滚动效果，滚动到最下边后不能反向循环滚动
div 滚动
Toml_的博客
06-09 6674
其中，::-webkit-scrollbar用于设置滚动条整体样式，::-webkit-scrollbar-thumb用于设置滚动条滑块样式。以上代码将滚动条宽度设置为 6px，高度设置为 6px，滑块圆角设置为 3px，滑块颜色设置为灰色半透明，滑块轨道颜色设置为浅灰色半透明。将overflow属性设置为auto或scroll，当内容超出div的高度或宽度时，就会出现滚动条。2.给div设置CSS属性overflow为auto或scroll，这将使div在高度范围内滚动。是你要选择的元素的类名。
JS实现当前编辑行自动滚动至div显示区域
宁静深远的专栏
10-15 6149
最近在正在做的会计系统实施过程中，客户要求在录入凭证分录时，实现每次录入的分录自动选中，并且如果分录在其所在的div隐藏区域时，将其滚动至显示区域。由于先前已经实现JS控制的当前行高亮显示的功能，因此，只需实现当前行的自动滚动。考虑到所有的凭证分录信息都放在div内，因此可以借助JavaScript控制div的某些属性实现，google的结果表明，将scrollTop与offsetTop、offs
Js 自动滚动功能
fanfanjin的专栏
08-19 855
New Document           ul,li{margin:0;padding:0;font-size:12px;color:#999;} ul{height:100px;overflow:hidden;} ul li{line-h
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值