html实现一个不断滚动的虚线矩形

最新推荐文章于 2023-05-05 15:05:20 发布

翻译最新推荐文章于 2023-05-05 15:05:20 发布 · 935 阅读

html 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的连续滚动矩形边框效果。通过不断更新边框的位置来达到视觉上的连续滚动感，适用于网页装饰或强调特定区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在网上看到一个连续滚动的矩形，感觉不错，就抠了下来

静态的就是这样，

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.7.2.min.js"></script>
<script src="./util.js"></script>
</head>
<style>
.topBorder-move{position:relative;left:-1500px;width:3000px;border-top: 2px dashed #DADDE1;}
.bottomBorder-move{position:relative;left:-1500px;width:4000px;border-bottom: 2px dashed #DADDE1;}
.leftBorder-move{position:absolute;top:-1500px;width:1px;height:4000px;border-left: 2px dashed #DADDE1;}
.rightBorder-move{position:absolute;right:0;top:-1500px;width:1px;height:3000px;border-right: 2px dashed #DADDE1;}
.coop-list {
position: relative;
width: 100%;
overflow: hidden;
margin-top: 5px;
}
</style>
<body>
<div class="coop-list">
<div class="topBorder-move" id="J_borTop" style="left: -1354px;"></div>
<div class="leftBorder-move" id="J_borLeft" style="top: -1646px;"></div>
<div>
在这个框里进行相关的布局
</div>
<div class="rightBorder-move" id="J_borRight" style="top: -1354px;"></div>
<div class="bottomBorder-move" id="J_borBottom" style="left: -1646px;"></div>
</div>
<script>
function border_move() {
var borTop = util.$G("J_borTop"),
borBottom = util.$G("J_borBottom"),
borLeft = util.$G("J_borLeft"),
borRight = util.$G("J_borRight"),
left = util.getStyleValue(borTop, 'left'),
top = util.getStyleValue(borLeft, 'top');
setInterval(function () {
if (left < 0) {
left += 2;
borRight.style.top = left + "px";
borTop.style.left = left + "px";
} else left = -1500;
if (top > -3000) {
top -= 2;
borBottom.style.left = top + "px";
borLeft.style.top = top + "px";
} else top = -1500;
}, 60);
}
border_move();
</script>
</body>
</html>

其中要加载一个util.js,

var util = function () {
    return {
        on:function (obj, type, handler) {
            var types = this.isArray(type) ? type : [type],
                k = types.length,
                d;
            if (!obj.addEventListener) {
                //绑定obj 为this
                d = function (evt) {
                    evt = evt || window.event;
                    var el = evt.srcElement;
                    return handler.call(el, evt);
                };
                handler._d = d;
            }
            if (k) while (k--) {
                type = types[k];
                if (obj.addEventListener) {
                    obj.addEventListener(type, handler, false);
                } else {
                    obj.attachEvent('on' + type, d);
                }
            }
            obj = null;
        },
        un:function (obj, type, handler) {
            var types = this.isArray(type) ? type : [type],
                k = types.length;
            if (k) while (k--) {
                type = types[k];
                if (obj.removeEventListener) {
                    obj.removeEventListener(type, handler, false);
                } else {
                    obj.detachEvent('on' + type, handler._d || handler);
                }
            }
        },
        isEmpty:function (data) {
            return data.replace(/[ ]/g, "") != "" ? data : "无";
        },
        getEvent:function (event) {
            return event ? event : window.event;
        },
        getTarget:function (event) {
            return event.target || event.srcElement;
        },
        setInnerText:function (element, text) {
            if (typeof element.textContent == "string")
                element.textContent = text;
            else
                element.innerText = text;
        },
        $G:function (id) {
            return document.getElementById(id)
        },
        getFirstNode:function (ele) {
            return ele.firstChild.nodeType == 1 ? ele.firstChild : ele.firstElementChild;
        },
        getElementsByClassName:function (clsName) {
            var doc = document;
            if (!doc.getElementsByClassName) {
                var clsArr = [];
                var reg = new RegExp("\\b" + clsName + "\\b");
                var eleArr = doc.getElementsByTagName("*");
                for (var i = 0, eleobj; eleobj = eleArr[i++];) {
                    if (reg.test(eleobj.className))
                        clsArr.push(eleobj);
                }
                return clsArr;
            }
            else {
                return doc.getElementsByClassName(clsName);
            }
        },
        getCharCode:function (event) {
            return event.keyCode || event.which || event.charCode;
        },
        getStyleValue:function(ele,attr){
            var doc=document;
            var style=ele.currentStyle||doc.defaultView.getComputedStyle(ele,null);
            return parseInt(style[attr].replace(/px/g,""));
        },
        getBrowerVersion:function(){
            var agent = navigator.userAgent.toLowerCase(),
                opera = window.opera,
                browser = {
                    ie		: !!window.ActiveXObject,
                    webkit	: ( agent.indexOf( ' applewebkit/' ) > -1 ),
                    quirks : ( document.compatMode == 'BackCompat' ),
                    opera	: ( !!opera && opera.version )
                };
            if ( browser.ie ){
                browser.version = parseFloat( agent.match( /msie (\d+)/ )[1] );
            }
            browser.gecko = ( navigator.product == 'Gecko' && !browser.webkit && !browser.opera );
            return browser;
        },
        isArray:function (obj) {
            return Object.prototype.toString.call(obj) === '[object Array]';
        },
        request:function (option) {
            var ajaxRequest = creatAjaxRequest();
            if (ajaxRequest == null) {
                alert("您的浏览器不支持AJAX！");
                return;
            }
            ajaxRequest.onreadystatechange = function () {
                if (ajaxRequest.readyState == 4) {
                    if (ajaxRequest.status >= 200 && ajaxRequest.status < 300 || ajaxRequest.status == 304) {
                        option.onSuccess(ajaxRequest.responseText);
                    }
                }
                else {
                    if (option.hasLoading)
                        util.$G(option.loading_Id).innerHTML = "";
                }
            };
            ajaxRequest.open("post", option.url, true);
            ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajaxRequest.send(option.param);
        }
    };

    /**
     * 创建一个ajaxRequest对象
     */
    function creatAjaxRequest() {
        var xmlHttp = null;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttp;
    }
}();