ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

前端加载页面后自动滚动内容（水平，竖直）

2021-01-05 18:01:07  阅读：159  来源： 互联网

标签：LDC 滚动 top content 竖直 contentUl var 加载 页面


前端滚动内容

竖直滚动

<!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

<!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>

    </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">A</div>
            <div class="floor" id="floorA">3</div>
            <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&nbsp;lifts&nbsp;testing...&nbsp;</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 Group</div>
                <div class="lineItem" id="elev0"></div>
            </div>
            <div style="border:2px solid #cba052; height:0px;padding:0px;"></div>
            <div id="groupPanel0">
                <!--
                <div><images class="floorImg" src="images/f/f2.png"><label class="user">Fisher Zhang</label></div>
                <div><images class="floorImg" src="images/f/f3.png"><label class="user">Eric Xu</label></div>
                 -->
            </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 Group</div>
                <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><images class="floorImg2" src="images/f/f2.png"><label class="user2">Fisher Zhang</label></div>
                <div><images class="floorImg2" src="images/f/f3.png"><label class="user2">Eric Xu</label></div>
                 -->
            </div>
        </div>

    </div>
    <div class="right" id="elev2P" style="">
        <div class="flashTop">
            <div class="elev">B</div>
            <div class="floor" id="floorB">3</div>
            <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&nbsp;lifts&nbsp;testing...&nbsp;</p>
        </div>
        <div class="scrollContent" id="scrollContentRight">
        </div>
    </div>
    <!--    <div style="clear:both"></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 = '<div><img class="floorImg" src="images/f/f${floor}.png"/><label class="user">${name}</label></div>'
    var userTmpl2 = '<div><img class="floorImg2" src="images/f/f${floor}.png"/><label class="user2">${name}</label></div>'
</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 onl oadContent(arr, dir) {
    var box = document.getElementById('scrollContent' + dir);
    for (var i = 0; i < arr.length; i++) {
//        box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        if (i == 0) {
            box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        } else {
            box.children[0].innerHTML += '<li>' + arr[i] + '</li>';
        }
    }
}

function init() {
    onl oadContent(arrRight, 'Right');
    onl oadContent(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);

效果图
在这里插入图片描述

标签：LDC,滚动,top,content,竖直,contentUl,var,加载,页面
来源： https://blog.csdn.net/qq_43030934/article/details/112247922

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有