HTML/CSS
Javascript 实现虚线边框旋转效果
PetitQ
看到百度 ueditor 编辑器网站首页，底部有一个滚动虚框的效果(原谅我不会做 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>
效果就不展示了，可以复制代码运行查看一下非常简单的效果，学无止境一点点积累。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
