注：预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接.

完整代码

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>边框虚线旋转</title>
  6.     <style type="text/css" charset="utf-8">
  7.         .coop-list {
  8.             position: relative;
  9.             width: 60%;
  10.             overflow: hidden;
  11.             margin: 20px;
  12.         }
  13.  
  14.         .topBorder-move {
  15.             position: relative;
  16.             left: -1500px;
  17.             width: 3000px;
  18.             border-top: 2px dashed #DADDE1;
  19.         }
  20.  
  21.         .bottomBorder-move {
  22.             position: relative;
  23.             left: -1500px;
  24.             width: 4000px;
  25.             border-bottom: 2px dashed #DADDE1;
  26.         }
  27.  
  28.         .leftBorder-move {
  29.             position: absolute;
  30.             top: -1500px;
  31.             width: 1px;
  32.             height: 4000px;
  33.             border-left: 2px dashed #DADDE1;
  34.         }
  35.  
  36.         .rightBorder-move {
  37.             position: absolute;
  38.             right: 0;
  39.             top: -1500px;
  40.             width: 1px;
  41.             height: 3000px;
  42.             border-right: 2px dashed #DADDE1;
  43.         }
  44.     </style>
  45. </head>
  46.  
  47. <body>
  48.     <div class="coop-list">
  49.         <div class="topBorder-move" id="J_borTop"></div>
  50.         <div class="leftBorder-move" id="J_borLeft"></div>
  51.         <div> 转啊转啊转啊转</div>
  52.         <div class="rightBorder-move" id="J_borRight"></div>
  53.         <div class="bottomBorder-move" id="J_borBottom"></div>
  54.     </div>
  55.  
  56.     <script>
  57.         var getStyleValue = function (ele, attr) {
  58.             var doc = document;
  59.             var style = ele.currentStyle || doc.defaultView.getComputedStyle(ele, null);
  60.             return parseInt(style[attr].replace(/px/g, ""));
  61.         };
  62.  
  63.         var $G = function (id) {
  64.             return document.getElementById(id);
  65.         };
  66.  
  67.         (function () {
  68.             var borTop = $G("J_borTop"),
  69.                  borBottom = $G("J_borBottom"),
  70.                  borLeft = $G("J_borLeft"),
  71.                  borRight = $G("J_borRight"),
  72.                  left = getStyleValue(borTop, 'left'),
  73.                  top = getStyleValue(borLeft, 'top');
  74.  
  75.             setInterval(function () {
  76.                 if (left < 0) {
  77.                     left += 2;
  78.                     borRight.style.top = left + "px";
  79.                     borTop.style.left = left + "px";
  80.                 } else {
  81.                     left = -1500
  82.                 };
  83.  
  84.                 if (top > -3000) {
  85.                     top -= 2;
  86.                     borBottom.style.left = top + "px";
  87.                     borLeft.style.top = top + "px";
  88.                 } else {
  89.                     top = -1500
  90.                 };
  91.             }, 60);
  92.         })();
  93.     </script>
  94. </body>
  95. </html>

　　

js css 构建滚动边框的更多相关文章

  1. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

  2. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  3. 常用[js,css,jquery,html]

    目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur   ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  6. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  7. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  8. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

  9. Permit.js – 用于构建多状态原型的 jQuery 插件

    Permit.js 是一个 jQuery 插件,用于构建交互的,多态的网站原型和应用程序原型.也许你的网站有的功能仅适用于登录的成员,只有管理员才能使用或者你的应用程序会根据线上或离线有不同的功能,这 ...

随机推荐

  1. C#写好的类库dll怎么在别人调用的时候也能看到注释？

    菜单 Project -> 'xxxx' Properties -> Build -> Output -> 勾上 XML Documentation file

  2. paper 92：图像视觉博客资源2之MIT斯坦福CMU

    收录的图像视觉(也包含机器学习等)领域的博客资源的第二部分,包含:美国MIT.斯坦福.CMU三所高校 1)这些名人大家一般都熟悉,本文仅收录了包含较多资料的个人博客,并且有不少更新,还有些名人由于分享 ...

  3. eclipse jdk配置

    eclipse版本jdk有个默认版本.例如java SE 8［1.8.0_45］ 有时候导入一个项目会碰到很奇怪的编译错误.这一般是编译jdk版本导致的. 解决方法:选择任何一个项目-buildpat ...

  4. ORACLE 默认密码确认

    select USER_NAME USER_WITH_DEFAULT_PASSWORD from ( select fnd_web_sec.validate_login('AME_INVALID_AP ...

  5. CSSの神小结-简单备忘一下(亲测可用)

    css 选择器优先级,标签>id>class 权重 id>class>标签 只记录能想到的以免遗忘: 1.字体css可继承 2.表格:表格细线的合并,表格单元格合并,单元格内容 ...

  6. 夺命雷公狗jquery---6属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 记linux下使用create_ap 创建热点失败及解决(涉及rfkill)

    先介绍一下 create_ap. 这是一个在linux中创建热点用的脚本, 托管在github中, https://github.com/oblique/create_ap/ 正文开始: 习惯了win ...

  8. zw版【转发·台湾nvp系列Delphi例程】.NET调用HALCON COM控件内存释放模式

    zw版[转发·台湾nvp系列Delphi例程].NET调用HALCON COM控件内存释放模式 ------------------------------------方法一 :Imports Sys ...

  9. VisualSVNServer启动失败错误处理

    VisualSVNServerServer service failed to start:     服务已返回特定的服务器错误代码:(0x8007042a)     Please check Vis ...

  10. 搭建无限制权限的简单git服务器使用git-daemon脚本

    如果想要用ubantu架设无限制权限(即不适用gitosis)的简单git服务器,实现git库下载clone,push等简单的基本功能, 可以直接使用git-daemon脚本(非常不安全,建议项目代码 ...