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>