js 实现虚线边框旋转效果

最新推荐文章于 2025-05-25 23:10:07 发布

原创最新推荐文章于 2025-05-25 23:10:07 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #虚线边框

js 专栏收录该内容

1 篇文章

订阅专栏

无意看到百度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>

效果就不展示了，可以复制代码运行查看一下......非常简单的效果，学无止境一点点积累