js 实现虚线边框旋转效果
无意看到百度ueditor编辑器网站首页（http://ueditor.baidu.com/website/）底部有一个滚动虚框的效果(原谅我不会做gif 图)，如图：
就去看了一下，开始以为是CSS,后来打开F12 ，哦原来是js,那就尝试写一下吧......菜鸟就是要经常动手
html 部分：
<div class="box">
<div class="topBorder" id="J_borTop"></div>
<div class="leftBorder" id="J_borLeft"></div>
<div class="rightBorder" id="J_borRight"></div>
<div class="bottomBorder" id="J_borBottom"></div>
内容区
</div>
css 部分：
.box{
position: relative;
width: 1000px;
height: 400px;
line-height: 400px;
margin: 0 auto;
text-align:center;
font-size: 40px;
background: #ffffff;
overflow: hidden;
}
.topBorder{
position: relative;
width:3000px;
border-top: 2px dashed #dddddd;
}
.leftBorder{
position: absolute;
width: 1px;
height: 40000px;
border-left:2px dashed #dddddd;
}
.rightBorder{
position: absolute;
right:0;
width:1px ;
height: 3000px;
border-right: 2px dashed #dddddd;
}
.bottomBorder{
position: absolute;
width:40000px;
bottom:0;
border-bottom: 2px dashed #dddddd;
}
js 部分：
<script>
border_move();
//获取样式
function getStyleValue(ele,attr){
var doc=document;
var style=ele.currentStyle||doc.defaultView.getComputedStyle(ele,null);
return parseInt(style[attr].replace(/px/g,""));
}
// 边框旋转
function border_move(){
var borderT = document.getElementById("J_borTop"),
borderL = document.getElementById("J_borLeft"),
borderR = document.getElementById("J_borRight"),
borderB = document.getElementById("J_borBottom");
var left = getStyleValue(borderT,"left"),
top = getStyleValue(borderL,"top");
setInterval(function(){
if(left < 0){
left += 2;
borderR.style.top = left + 'px';
borderT.style.left = left + 'px';
}else{
left = -1500;
}
if(top > -3000){
top -= 2;
borderB.style.left = top + 'px';
borderL.style.top = top +'px';
}else{
top = -1500;
}
},60)
}
</script>
效果就不展示了，可以复制代码运行查看一下......非常简单的效果，学无止境一点点积累