Native JS to achieve blinds special effects

This article shares a blinds special effect implemented with native JS, the effect is as follows:

The code implementation is as follows, you are welcome to copy and paste.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS to achieve blinds special effects</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        li {
            list-style: none;
        }
 
        a {
            text-decoration: none;
        }
 
        #box {
            width: 562px;
            padding: 10px 24px 20px;
            background: #EACFCF;
            overflow: hidden;
            margin: 20px auto 0;
        }
 
        .left {
            width: 266px;
            float: left;
        }
 
        .right {
            width: 266px;
            float: right;
        }
 
        #box h2 {
            height: 38px;
            border-bottom: 1px solid #D2A1A1;
            padding-left: 20px;
        }
 
        #box h2 strong {
            float: left;
            line-height: 38px;
            color: #885050;
            font-weight: normal;
        }
 
        #box h2 a {
            float: right;
            width: 52px;
            height: 14px;
            font-size: 12px;
            text-indent: 10px;
            color: #fff;
            line-height: 12px;
            font-weight: normal;
            margin-top: 10px;
        }
 
        #box li {
            height: 30px;
            position: relative;
            border-bottom: 1px dashed #D1A1A1;
        }
 
        #box li div,
        #box lip {
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
 
        #box lip {
            background: #fff;
            opacity: 0;
            filter:alpha(opacity=0);
        }
 
        #box li div a,
        #box li div span {
            line-height: 30px;
            font-size: 12px;
            height: 30px;
        }
 
        #box li div a {
            float: left;
            padding-left: 20px;
            color: #7F5454;
            width: 172px;
            overflow: hidden;
        }
 
        #box li div span {
            padding-right: 10px;
            float: right;
            color: #CF9494;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oBox = document.getElementById("box");
            var aLi = document.getElementsByTagName('li');
            var i = 0;
            for (i = 0; i < aLi.length; i++) {
                var oP = aLi[i].getElementsByTagName('p')[0];
                oP.iAlpha = 0;
                oP.time = null;
                aLi[i].onmouseover = function () {
                    var oP = this.getElementsByTagName('p')[0];
                    oP.time ? clearInterval(oP.time) : "";
                    oP.style.opacity = 1;
                    oP.style.filter = "alpha(opacity=100)";
                    oP.iAlpha = 100;
                }
                aLi[i].onmouseout = function () {
                    starmove(this.getElementsByTagName('p')[0]);
                };
            }
        };
        function starmove(obj) {
            obj.time ? clearInterval(obj.time) : "";
            obj.time = setInterval(function () { domove(obj); }, 14);
        }
        function domove(obj) {
            var iSpeed = 5;
            if (obj.iAlpha <= iSpeed) {
                clearInterval(obj.time);
                obj.iAlpha = 0;
                obj.time = null;
            } else {
                obj.iAlpha -= iSpeed;
            }
            obj.style.opacity = obj.iAlpha / 100;
            obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
        }
    </script>
</head>
 
<body>
    <div id="box">
        <div class="left">
            <h2>
                <strong>Latest News</strong>
                <a>more</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>Course FAQs</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>JS course completion criteria</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Web effects collection (updated daily)</a>
                        <span>20110322</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Class Location</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>CSS course latest start time</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Latest JavaScript course start time</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Zero-basic web design course</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <h2>
                <strong>What's new</strong>
                <a>more</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>3D spherical tag cloud effect implemented by JavaScript</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Live Recording of Saturday's JavaScript Meetup</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Ali front-end interview questions</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Brief Analysis of the Implementation Principles of Google Maps Front-end (Part 1)</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Windows Calculator (Simplified Version) Homework Exercise</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Accordion easing effect</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>3D spherical tag cloud effect implemented by JavaScript</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</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:

Use move.js library to realize the shutter effect
JS implements a similar effect to the Venetian blinds drop-down menu
Introduction to the effect and principle of blinds realized by native js
Implementing blinds animation based on JavaScript is not just a matter of flas
js realizes the green and white vertical web blinds animation switching effect
js method to achieve horizontal blinds effect web page switching animation effect
JS realizes the effect of web shutters

<<: HTML table markup tutorial (5): light border color attribute BORDERCOLORLIGHT

>>: Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)