HTML/CSS

Javascript 实现虚线边框旋转效果

也想出现在这里?联系我们
创客云

看到百度 ueditor 编辑器网站首页,底部有一个滚动虚框的效果(原谅我不会做 gif 图),如图:
Javascript 实现虚线边框旋转效果-云模板
就去看了一下,开始以为是 CSS,后来打开 F12 ,哦原来是 js,那就尝试写一下吧。

HTML 部分

  1. <div class="box">
  2. <div class="topBorder" id="J_borTop"></div>
  3. <div class="leftBorder" id="J_borLeft"></div>
  4. <div class="rightBorder" id="J_borRight"></div>
  5. <div class="bottomBorder" id="J_borBottom"></div>
  6. 内容区
  7. </div>
也想出现在这里?联系我们
创客主机

CSS 部分:

  1. .box{
  2. position: relative;
  3. width: 1000px;
  4. height: 400px;
  5. line-height: 400px;
  6. margin: 0 auto;
  7. text-align:center;
  8. font-size: 40px;
  9. background: #ffffff;
  10. overflow: hidden;
  11. }
  12. .topBorder{
  13. position: relative;
  14. width:3000px;
  15. border-top: 2px dashed #dddddd;
  16. }
  17. .leftBorder{
  18. position: absolute;
  19. width: 1px;
  20. height: 40000px;
  21. border-left:2px dashed #dddddd;
  22. }
  23. .rightBorder{
  24. position: absolute;
  25. right:0;
  26. width:1px ;
  27. height: 3000px;
  28. border-right: 2px dashed #dddddd;
  29. }
  30. .bottomBorder{
  31. position: absolute;
  32. width:40000px;
  33. bottom:0;
  34. border-bottom: 2px dashed #dddddd;
  35. }

js 部分:

  1. <script>
  2. border_move();
  3. //获取样式
  4. function getStyleValue(ele,attr){
  5. var doc=document;
  6. var style=ele.currentStyle||doc.defaultView.getComputedStyle(ele,null);
  7. return parseInt(style[attr].replace(/px/g,""));
  8. }
  9. // 边框旋转
  10. function border_move(){
  11. var borderT = document.getElementById("J_borTop"),
  12. borderL = document.getElementById("J_borLeft"),
  13. borderR = document.getElementById("J_borRight"),
  14. borderB = document.getElementById("J_borBottom");
  15. var left = getStyleValue(borderT,"left"),
  16. top = getStyleValue(borderL,"top");
  17. setInterval(function(){
  18. if(left < 0){
  19. left += 2;
  20. borderR.style.top = left + 'px';
  21. borderT.style.left = left + 'px';
  22. }else{
  23. left = -1500;
  24. }
  25. if(top > -3000){
  26. top -= 2;
  27. borderB.style.left = top + 'px';
  28. borderL.style.top = top +'px';
  29. }else{
  30. top = -1500;
  31. }
  32. },60)
  33. }
  34. </script>

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

8

8年专注高端建站

秋季到冬季,是一个季节的距离:

①、感恩回馈云模板VIP会员限时 6 折 ---》充值VIP

②、买模板送等值主机(高速、稳定、免备案)活动火热进行中 ---》云模板

咨 询 客 服