看到百度 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>
效果就不展示了，可以复制代码运行查看一下非常简单的效果，学无止境一点点积累。
