注：预览效果请点击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. 生成apache证书(https应用)

    # cd /usr/local/apache2/conf# tar zxvf ssl.ca-0.1.tar.gz# cd ssl.ca-0.1生成根证书:# ./new-root-ca.sh      ...

  2. 在GitHub上建立个人主页的方法（转载）

    GitHub就不需要介绍了,不清楚可以百度一下.只说目前GitHub是最火的开源程序托管集中地了,连PHP的源码都在GitHub上面托管了(https://github.com/php ). GitH ...

  3. 夺命雷公狗---node.js---6net模块玩telnet通信（下）

    我们来升级玩玩,废话不多说,代码如下所示: /** * Created by leigood on 2016/8/12. */ var net = require('net'); var ChatSr ...

  4. Java高效编程之三【类和接口】

    本部分包含的一些指导原则,可以帮助哦我们更好滴利用这些语言元素,以便让设计出来的类更加有用.健壮和灵活. 十二.使类和成员的访问能力最小化 三个关键词访问修饰符:private(私有的=类级别的).未 ...

  5. IE和FF区别关于css和js

    css 1.ul标签FF中有padding值,没有margin,IE中相反 解决办法:将ul的padding和margin都设为0, js 1.IE中innerText在火狐中没有,使用textCon ...

  6. ubuntu android环境配置

    1.下载eclipse 2.下载sdk 3.安装adt 4.配置sdk环境路径sudo gedit /etc/profile export PATH=$JAVA_HOME/bin:$JAVA_HOME ...

  7. Android自动化压力测试快速入门教程（图解）——MonkeyRunner

    一.MonkeyRunner测试环境配置(转自) 1.  android-sdk 下载地址:http://www.android-doc.com/sdk/index.html 下载完成后,只需要解压就 ...

  8. Intel+Ardruino 101

    为了传说中的那啥, 啊, 嗯.. #include <CurieBLE.h>const int ledPin = 13; // set ledPin to on-board LED  LE ...

  9. va_list/va_start/va_arg/va_end深入分析【转】

    转自:http://www.cnblogs.com/justinzhang/archive/2011/09/29/2195969.html va_list/va_start/va_arg/va_end ...

  10. IE11下，IIS7.5不自动生成__doPostBack事件

    MS在 2013/10/8 已出补丁 http://www.microsoft.com/zh-cn/download/details.aspx?id=39257 https://support.mic ...