js css 构建滚动边框
注：预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接.
完整代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边框虚线旋转</title>
<style type="text/css" charset="utf-8">
.coop-list {
position: relative;
width: 60%;
overflow: hidden;
margin: 20px;
}
.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;
}
</style>
</head>
<body>
<div class="coop-list">
<div class="topBorder-move" id="J_borTop"></div>
<div class="leftBorder-move" id="J_borLeft"></div>
<div> 转啊转啊转啊转</div>
<div class="rightBorder-move" id="J_borRight"></div>
<div class="bottomBorder-move" id="J_borBottom"></div>
</div>
<script>
var getStyleValue = function (ele, attr) {
var doc = document;
var style = ele.currentStyle || doc.defaultView.getComputedStyle(ele, null);
return parseInt(style[attr].replace(/px/g, ""));
};
var $G = function (id) {
return document.getElementById(id);
};
(function () {
var borTop = $G("J_borTop"),
borBottom = $G("J_borBottom"),
borLeft = $G("J_borLeft"),
borRight = $G("J_borRight"),
left = getStyleValue(borTop, 'left'),
top = 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);
})();
</script>
</body>
</html>
