Native JS to achieve directory scrolling effects

Here is a text scrolling effect implemented with native JS. This effect is usually used to display some local information on web pages, such as news, dynamics, recharge records, etc. The effect is as follows:

The implementation code is as follows:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS to achieve directory scrolling effects</title>
    <style>
        body {
            font-size: 12px;
            line-height: 24px;
            text-align: center;
        }
 
        * {
            margin: 0px;
            padding: 0px;
        }
 
        ul {
            list-style: none;
        }
 
        a img {
            border: none;
        }
 
        a {
            color: #333;
            text-decoration: none;
        }
 
        a:hover {
            color: #ff0000;
        }
 
        #mooc {
            width: 399px;
            border: 5px solid #ababab;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            box-shadow: 2px 2px 10px #ababab;
            margin: 50px auto 0;
            text-align: left;
        }
 
        #moocTitle {
            height: 62px;
            overflow: hidden;
            font-size: 26px;
            line-height: 62px;
            padding-left: 30px;
            /* Firefox */
            background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
            /* Saf4+, Chrome */
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
            /* IE*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
            border: 1px solid ##f05e6f;
            /* Gecko browsers */
            -moz-border-radius: 8px 8px 0 0;
            /* Webkit browsers */
            -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
            color: #fff;
            position: relative;
        }
 
        #moocTitle a {
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: inline;
            color: #fff;
            font-size: 12px;
            line-height: 24px;
        }
 
        #moocBot {
            width: 399px;
            height: 10px;
            overflow: hidden;
        }
 
        #moocBox {
            height: 144px;
            width: 335px;
            margin-left: 25px;
            margin-top: 10px;
            overflow: hidden;
        }
 
        #mooc ul li {
            height: 24px;
        }
 
        #mooc ul li a {
            width: 180px;
            float: left;
            display: block;
            overflow: hidden;
            text-indent: 15px;
            height: 24px;
        }
 
        #mooc ul li span {
            float: right;
            color: #999;
        }
    </style>
</head>
 
<body>
    <div id="mooc">
        <h3 id="moocTitle">
            Latest Courses<a href="#" target="_self">More>></a>
        </h3>
 
        <div id="moocBox">
            <ul id="con1">
                <li>
                    <a href="#" >1. Absolute loser's counterattack</a>
                    <span>2013-09-18</span>
                </li>
                <li>
                    <a href="#" >2. Tab page switching effect</a>
                    <span>2013-10-09</span>
                </li>
                <li>
                    <a href="#" >3. Making rounded crystal buttons</a>
                    <span>2013-10-21</span>
                </li>
                <li>
                    <a href="#" >4. HTML+CSS Basic Course</a>
                    <span>2013-11-01</span>
                </li>
                <li>
                    <a href="#" >5. Create page numbers</a>
                    <span>2013-11-06</span>
                </li>
                <li>
                    <a href="#" >6. Creating a navigation menu</a>
                    <span>2013-11-08</span>
                </li>
                <li>
                    <a href="#" >7. Information list creation</a>
                    <span>2013-11-15</span>
                </li>
                <li>
                    <a href="#" >8. Create a drop-down menu</a>
                    <span>2013-11-22</span>
                </li>
                <li>
                    <a href="#" >9. How to achieve the "Newbie Guide" effect</a>
                    <span>2013-12-06</span>
                </li>
            </ul>
            <ul id="con2"></ul>
        </div>
    </div>
    <script type="text/javascript">
        //Get the scroll list container var area = document.getElementById('moocBox');
        //Get list 1
        var con1 = document.getElementById('con1');
        //Get empty list 2
        var con2 = document.getElementById('con2');
        //Set the timer execution time interval var speed = 50;
 
        //Set the scroll up variable area.scrollTop = 0;
 
        //Copy the contents of list 1 to list 2
        con2.innerHTML = con1.innerHTML;
 
        //Scroll up function function scrollUp() {
            //When the scrolling height of the scrolling list is greater than or equal to the height of the list itself if (area.scrollTop >= con1.scrollHeight) {
                //Reset the list scroll height to zero and start scrolling again area.scrollTop = 0;
                //otherwise} else {
                //Continue scrolling area.scrollTop++;
            }
        }
 
        //Store timer var myScroll = setInterval("scrollUp()", speed);
 
        //When the mouse moves in, clear the timer area.onmouseover = function () {
            clearInterval(myScroll);
        }
        //When the mouse moves away, start the timer area.onmouseout = function () {
            myScroll = setInterval("scrollUp()", speed);
        }
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js/jquery obtains the browser window visible area height and width and scroll bar height implementation code
JS code to determine the bottom of the scroll bar
JS realizes horizontal uninterrupted scrolling of text
js operation scroll bar event example
Thoroughly understand JS seamless scrolling code
js method to obtain scroll distance
When the scroll bar scrolls to the bottom of the page, the js code for automatically adding content is loaded
A brief analysis of js text scrolling effect
js determines whether the scroll bar has reached the bottom or top of the page
js implements scroll bar to scroll to the bottom of the page to continue loading

<<: In-depth analysis of MySQL database transactions and locks

>>: Provides helpful suggestions for improving website design