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