前端加载页面后自动滚动内容（水平，竖直）
前端滚动内容
- 竖直滚动
-
- 水平滚动
- 综合应用
竖直滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript上下滚动</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#scrollTop{width:460px;height:30px;margin:0 auto;margin-top: 20px;margin-bottom:20px;}
#scrollTop a{display: inline-block;width:200px;height:30px;line-height: 30px;background:green;text-align: center;color:#fff;margin-left:20px;}
#scrollContent {
width: 500px;
height: 440px;
border: 1px solid yellowgreen;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#scrollContent ul {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#scrollContent ul li {
width: 460px;
height: 80px;
background: yellow;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="scroll">
<div id="scrollTop"><a href="javascript:;">向上滚动</a><a href="javascript:;">向下滚动</a></div>
<div id="scrollContent">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
<script type="text/javascript">
var scrollTop = document.getElementById("scrollTop");
var scrollContent = document.getElementById("scrollContent");
var contentUl = scrollContent.children[0];
var scrollTopUp = scrollTop.children[0];//向上滚动
var scrollTopDown = scrollTop.children[1];//向下滚动
var direction = -1;//方向
var timer = null;//定义定时器
contentUl.innerHTML += contentUl.innerHTML;
setTimeout(move, 1000);//执行一次定时器
//向上滚动点击事件
scrollTopUp.onclick = function () {
clearInterval(timer);//清除定时器
direction = -1;//向上方向
move();//调用方法
}
// 向下滚动点击事件
scrollTopDown.onclick = function () {
clearInterval(timer);//清除定时器
direction = 1;//向下方向
move();//调用方法
}
//滚动方法
function move() {
timer = setInterval(function () {
contentUl.style.top = contentUl.offsetTop + direction + 'px';
// console.log("获取当前元素到顶部的距离：" + contentUl.offsetTop);
// console.log("获取当前元素的高度：" + contentUl.offsetHeight);
//向上滚动小于当前元素高度的一半时，则执行如下操作
if (contentUl.offsetTop <= -contentUl.offsetHeight / 2) {
contentUl.style.top = 0;
}
//向下滚动大于0时，则执行如下操作
else if (contentUl.offsetTop >= 0) {
contentUl.style.top = -contentUl.offsetHeight / 2 + "px";
}
}, 30);
}
</script>
</body>
</html>
效果图
水平滚动
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/dispatching-2E.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<meta charset="utf-8"/>
<title>Dispatching UI-2E</title>
<style>
div{
width:100%;
margin:0;
padding:0;
background-color: #312a28;
color: #ff5839;
text-align: center;
font-size: 2em;
font-weight: bold;
overflow: hidden;
}
#roll{
padding-top:10px;
padding-left: 0;
}
</style>
</head>
<body>
<div>
<p id="roll">WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!</p>
</div>
<script src="js/l.js"></script>
</body>
js
function func(){
var tag=document.getElementById("roll");
var content=tag.innerText;
var f=content.charAt(0);
var l=content.substring(1,content.length);
var new_content=l+f;
tag.innerText=new_content;
}
setInterval("func()",500);
综合应用
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/dispatching-2E.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.3.1.js">script>
<script type="text/javascript" src="js/jquery.tmpl.js">script>
<meta charset="utf-8"/>
<title>Dispatching UI-2Etitle>
<style>
style>
head>
<body class="bg" style="">
<div id="head" style="height: 180px"><img src="./images/header.png" alt="" style="height: 100%;width: 100%">div>
<div id="main" style="">
<div class="left" id="elev1P" style="">
<div class="flashTop">
<div class="elev">Adiv>
<div class="floor" id="floorA">3div>
<div class="direction"><img id="dirA" src="images/down.png" class="img24">div>
<div style="bottom: 0px">div>
div>
<div class="horizontalRoll">
<p id="horizontalRollLeft">LDC lifts testing... p>
div>
<div class="scrollContent" id="scrollContentLeft">div>
div>
<div class="center centerPane" style="">
<div id="group0" style="display: block">
<div class="groupText">
<div class="lineItem">Current Groupdiv>
<div class="lineItem" id="elev0">div>
div>
<div style="border:2px solid #cba052; height:0px;padding:0px;">div>
<div id="groupPanel0">
div>
div>
<div id="showTestWindow" style="position: absolute;top:45%; left: 35%;background-size: cover;display:none">
<div id="output">div>
<form name="myform">
<div style="margin: 0px">
<textarea name="outputtext" id="outputtext" rows="20" cols="150">textarea>
div>
<div style="margin: 0px;display: none">
<textarea name="inputtext" cols="50">textarea>
div>
<div style="margin: 0px;display: none">
<textarea name="url" cols="50">textarea>
div>
<div style="margin: 0px">
<input type="button" name=sendButton value="Send" onClick="sendText();">
<input type="button" name=clearButton value="Clear" onClick="clearText();">
<input type="button" name=disconnectButton value="Disconnect" onClick="doDisconnect();">
<input type="button" id="connectBtn" name=connectButton value="Connect" onClick="doConnect();">
div>
form>
div>
<div id="group1" style="position:absolute; left:47%;top: 27%; width: 100%;display:none">
<div class="groupText2">
<div class="lineItem" style="font-size: 180%">Next Groupdiv>
<div class="lineItem" id="elev1">div>
div>
<div style="position: relative;border:2px solid #cba052; height:0px;padding:0px;width: 52%">div>
<div id="groupPanel1">
div>
div>
div>
<div class="right" id="elev2P" style="">
<div class="flashTop">
<div class="elev">Bdiv>
<div class="floor" id="floorB">3div>
<div class="direction"><img id="dirB" src="images/up.png" class="img24"/>div>
<div style="bottom: 0px">div>
div>
<div class="horizontalRoll">
<p id="horizontalRollRight">LDC lifts testing... p>
div>
<div class="scrollContent" id="scrollContentRight">
div>
div>
div>
body>
<script>
//debug option
var reconnectAfterBroken = false
var clearDebugAfterBroken = false
//please modify the value to fit the scenario
var DEV_FLOOR = 1
var ELEV_DIR = 1
var MAX_DISP_GROUP = 2
//-----------------------------------
// group1, group2 , group3: {"groupId":3,"elevId":x, "users":[{"n":"fisher","f":3},{}]}
var groups = []
var timers = []
for (i = 0; i < MAX_DISP_GROUP; i++) {
timers.push(i)
}
//-------------------------------------
var userTmpl = '
'
var userTmpl2 = ''
script>
<script type="text/javascript" src="wssupport-2E.js">script>
<script type="text/javascript" src="ui-2E.js">script>
<script type="text/javascript" src="scroll.js">script>
<script type="text/javascript" src="tool.js">script>
html>
js
var arrleft = [
'Camera Sensor' + '/ ' + 'Camera Sensor test in car' + '/ ' + '2020/12/30' + '/ ' + 'An Zhonghui' + '/ ' + 'IoT',
'Health products' + '/ ' + 'To valite the product concept of touchless COP on top of vTouch technology' + '/ ' + 'Sep 2020 to Feb 2021' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Facial dispatching' + '/ ' + 'To demo the product of facial dispatching' + '/ ' + 'May 2017 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Robot integration' + '/ ' + 'To provide the elevator integration environment for 3rd party robot companies' + '/ ' + 'Nov 2019 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Interactive elevator call' + '/ ' + 'To demo the product concept of interactive elevator call from smart speaker (home)' + '/ ' + 'Jun 2020 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
];
var arrRight = [
'Camera Sensor' + '/ ' + 'Camera Sensor test in car' + '/ ' + '2020/12/30' + '/ ' + 'An Zhonghui' + '/ ' + 'IoT',
'Health products' + '/ ' + 'To valite the product concept of touchless COP on top of vTouch technology' + '/ ' + 'Sep 2020 to Feb 2021' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Facial dispatching' + '/ ' + 'To demo the product of facial dispatching' + '/ ' + 'May 2017 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Robot integration' + '/ ' + 'To provide the elevator integration environment for 3rd party robot companies' + '/ ' + 'Nov 2019 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
'Interactive elevator call' + '/ ' + 'To demo the product concept of interactive elevator call from smart speaker (home)' + '/ ' + 'Jun 2020 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
];
var rollTitle = 'LDC lifts testing......';
function srollContent(dir) {
setTimeout(move(dir, 50), 1000);//执行一次定时器
}
var direction = 1;//方向
var timer = null;//定义定时器
//滚动方法
function move(dir, t) {
// var scrollTop = document.getElementById("scrollTop");
var scrollContent = document.getElementById("scrollContent" + dir);
var contentUl = scrollContent.children[0];
// var scrollTopUp = scrollTop.children[0];//向上滚动
// var scrollTopDown = scrollTop.children[1];//向下滚动
contentUl.innerHTML += contentUl.innerHTML;
timer = setInterval(function () {
// console.log(contentUl.offsetTop);
contentUl.style.top = contentUl.offsetTop + direction + 'px';
// console.log("获取当前元素到顶部的距离：" + contentUl.offsetTop);
// console.log("获取当前元素的高度：" + contentUl.offsetHeight);
//向上滚动小于当前元素高度的一半时，则执行如下操作
if (contentUl.offsetTop <= -contentUl.offsetHeight / 2) {
contentUl.style.top = 0;
}
//向下滚动大于0时，则执行如下操作
else if (contentUl.offsetTop >= 0) {
contentUl.style.top = -contentUl.offsetHeight / 2 + "px";
}
}, t);
}
function onloadContent(arr, dir) {
var box = document.getElementById('scrollContent' + dir);
for (var i = 0; i < arr.length; i++) {
// box.innerHTML += '- ' + arr[i] + '
';
if (i == 0) {
box.innerHTML += '- '
+ arr[i] + '';
} else {
box.children[0].innerHTML += '' + arr[i] + '';
}
}
}
function init() {
onloadContent(arrRight, 'Right');
onloadContent(arrleft, 'Left');
srollContent('Left');
srollContent('Right');
srollContent('Left');
setInterval("horizontalRoll('horizontalRollRight', rollTitle)",500);
setInterval("horizontalRoll('horizontalRollLeft', rollTitle)",500);
}
function horizontalRoll(dir, rollTitle){
// var pObjs=document.getElementById(dir).getElementsByTagName("p");
// pObjs.innerText=rollTitle;
var tag=document.getElementById(dir);
var content=tag.innerText;
var f=content.charAt(0);
var l=content.substring(1,content.length);
var new_content=l+f;
tag.innerText=new_content;
console.log(new_content)
}
window.addEventListener("load", init, false);
效果图
