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

完整代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>边框虚线旋转</title>

    <style type="text/css" charset="utf-8">

        .coop-list {

            position: relative;

            width: 60%;

            overflow: hidden;

            margin: 20px;

        }

        .topBorder-move {

            position: relative;

            left: -1500px;

            width: 3000px;

            border-top: 2px dashed #DADDE1;

        }

        .bottomBorder-move {

            position: relative;

            left: -1500px;

            width: 4000px;

            border-bottom: 2px dashed #DADDE1;

        }

        .leftBorder-move {

            position: absolute;

            top: -1500px;

            width: 1px;

            height: 4000px;

            border-left: 2px dashed #DADDE1;

        }

        .rightBorder-move {

            position: absolute;

            right: 0;

            top: -1500px;

            width: 1px;

            height: 3000px;

            border-right: 2px dashed #DADDE1;

        }

    </style>

</head>

<body>

    <div class="coop-list">

        <div class="topBorder-move" id="J_borTop"></div>

        <div class="leftBorder-move" id="J_borLeft"></div>

        <div> 转啊转啊转啊转</div>

        <div class="rightBorder-move" id="J_borRight"></div>

        <div class="bottomBorder-move" id="J_borBottom"></div>

    </div>

    <script>

        var getStyleValue = function (ele, attr) {

            var doc = document;

            var style = ele.currentStyle || doc.defaultView.getComputedStyle(ele, null);

            return parseInt(style[attr].replace(/px/g, ""));

        };

        var $G = function (id) {

            return document.getElementById(id);

        };

        (function () {

            var borTop = $G("J_borTop"),

                 borBottom = $G("J_borBottom"),

                 borLeft = $G("J_borLeft"),

                 borRight = $G("J_borRight"),

                 left = getStyleValue(borTop, 'left'),

                 top = getStyleValue(borLeft, 'top');

            setInterval(function () {

                if (left < 0) {

                    left += 2;

                    borRight.style.top = left + "px";

                    borTop.style.left = left + "px";

                } else {

                    left = -1500

                };

                if (top > -3000) {

                    top -= 2;

                    borBottom.style.left = top + "px";

                    borLeft.style.top = top + "px";

                } else {

                    top = -1500

                };

            }, 60);

        })();

    </script>

</body>

</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. mysql 行锁

    在电子商务里,经常会出现库存数量少,购买的人又特别多,大并发情况下如何确保商品数量不会被多次购买. 其实很简单,利用事务+for update就可以解决. 我们都知道for update实际上是共享锁 ...

  2. RobotFramework 安装配置（二）

    前面已经写了一篇关于RF的安装配置了,那是在做自动化工具调研的时候搭建RF总结的,基于win32的系列软件安装的过程.经过1个月的调研,做成了demo,也大致学RF的使用和python的基础语法,暂时 ...

  3. android 学习随笔三(测试与单元测试框架)

    测试 1.按岗位: 黑盒测试:测试业务逻辑 白盒测试:测试逻辑方法 2.按测试粒度 方法测试 function 单元测试 unit 集成测试 integration 系统测试 system 3.按暴力 ...

  4. 在Linux中打印函数调用堆栈【原创】

    本人学习笔记,代码参考如下网址 参考http://www.cnblogs.com/dma1982/archive/2012/02/08/2342215.html zhangbh@prolin-srv: ...

  5. Linux计划任务，自动删除n天前的旧文件【转】

    转自:http://blog.csdn.net/jehoshaphat/article/details/51244237 转载地址:http://yaksayoo.blog.51cto.com/510 ...

  6. jiffies溢出与时间先后比较-time_after,time_before【转】

    转自:http://www.cnblogs.com/hfyinsdu/p/4600052.html 参考地址: http://blog.csdn.net/jk110333/article/detail ...

  7. sql server 2012 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值

    采用c#开发dll,并添加到sql server 中. 具体代码,可以用visual studio的向导生成模板. using System; using System.Collections; us ...

  8. Java锁的种类

    转载自:---->http://ifeve.com/java_lock_see/ Java锁的种类以及辨析锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchroniz ...

  9. 使用python脚本监控weblogic

    1.python的脚本如下: ############################################################################### #crea ...

  10. 【JQGRID DOCUMENTATION】.学习笔记.4.Navigator

    Navigator是一个将查找或编辑记录的动作,变得非常容易达到用户交互特性.开发者可以创建自定义动作,也可以使用六个预定义的动作.jqGrid为预定义的动作提供icon button图形. 一组完整 ...