您的位置：首页 > Web前端 > HTML

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

2017-06-10 16:59 405 查看

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

静态的就是这样，

代码：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航