html消息滚动

案例1

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 150px; 
            overflow: hidden;   /* 内容会被修剪，并且其余内容是不可见的 */
            margin: 50px auto;    
            border: 1px solid gray;
            text-align: center;
        }
        ul {
            list-style: none;
        }
        li {
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="review_box">
        <ul id="comment1">
            <li>第一条：美女渭桥东，春还事蚕作。</li>
            <li>第二条：五马如飞龙，青丝结金络。</li>
            <li>第三条：不知谁家子，调笑来相谑。</li>
            <li>第四条：妾本秦罗敷，玉颜艳名都。</li>
            <li>第五条：绿条映素手，采桑向城隅。</li>
            <li>第六条：使君且不顾，况复论秋胡。</li>
            <li>第七条：寒螀爱碧草，鸣凤栖青梧。</li>
            <li>第八条：托心自有处，但怪傍人愚。</li>
            <li>第九条：徒令白日暮，高驾空踟蹰。</li>
        </ul>
        <ul id="comment2"></ul>
    </div>
    <script>
        window.onload = roll(50);
 
        function roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 开始无滚动时设为0
            var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
            // 鼠标移入div时暂停滚动
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠标移出div后继续滚动
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }
 
        // 开始滚动函数
        function rollStart() {
            // 上面声明的DOM对象为局部对象需要再次声明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop++;
            }
        }
    </script>
</body>
</html>

posted @ 2024-03-27 19:10 DogLeftover 阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vis.js滚动和排序

· 右下角工具箱完善

· 文字无线循环向上轮播

· 小程序 | 实现消息滚动

· 自动滚动和循环内容DIV

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

html消息滚动

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	div {
	width: 300px;
	height: 150px;
	overflow: hidden; /* 内容会被修剪，并且其余内容是不可见的 */
	margin: 50px auto;
	border: 1px solid gray;
	text-align: center;
	}
	ul {
	list-style: none;
	}
	li {
	height: 30px;
	}
	</style>
	</head>
	<body>
	<div id="review_box">
	<ul id="comment1">
	<li>第一条：美女渭桥东，春还事蚕作。</li>
	<li>第二条：五马如飞龙，青丝结金络。</li>
	<li>第三条：不知谁家子，调笑来相谑。</li>
	<li>第四条：妾本秦罗敷，玉颜艳名都。</li>
	<li>第五条：绿条映素手，采桑向城隅。</li>
	<li>第六条：使君且不顾，况复论秋胡。</li>
	<li>第七条：寒螀爱碧草，鸣凤栖青梧。</li>
	<li>第八条：托心自有处，但怪傍人愚。</li>
	<li>第九条：徒令白日暮，高驾空踟蹰。</li>
	</ul>
	<ul id="comment2"></ul>
	</div>
	<script>
	window.onload = roll(50);

	function roll(t) {
	var ul1 = document.getElementById("comment1");
	var ul2 = document.getElementById("comment2");
	var ulbox = document.getElementById("review_box");
	ul2.innerHTML = ul1.innerHTML;
	ulbox.scrollTop = 0; // 开始无滚动时设为0
	var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
	// 鼠标移入div时暂停滚动
	ulbox.onmouseover = function () {
	clearInterval(timer);
	}
	// 鼠标移出div后继续滚动
	ulbox.onmouseout = function () {
	timer = setInterval(rollStart, t);
	}
	}

	// 开始滚动函数
	function rollStart() {
	// 上面声明的DOM对象为局部对象需要再次声明
	var ul1 = document.getElementById("comment1");
	var ul2 = document.getElementById("comment2");
	var ulbox = document.getElementById("review_box");
	// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
	if (ulbox.scrollTop >= ul1.scrollHeight) {
	ulbox.scrollTop = 0;
	} else {
	ulbox.scrollTop++;
	}
	}
	</script>
	</body>
	</html>