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

来源：互联网发布：java工程师职业路线编辑：程序博客网时间：2024/05/16 13:53

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

静态的就是这样，

代码：

<!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;    }}();

阅读全文

0 0