注：预览效果请点击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. 关于header跳转之后的乱码问题

    关于header跳转之后的乱码问题 http://www.360doc.com/content/11/0603/19/7052474_121495648.shtml 问题:不同网站的跳转出现乱码,不同 ...

  2. Oracle中游标返回多条数据的情况

    DECLARE -- 定义类型. TYPE test_type IS TABLE OF test_main%ROWTYPE; test_data test_type; -- 定义游标. CURSOR ...

  3. 夺命雷公狗---linux之centos的安装

    由于要玩node.js了,所以还是来复习下linux系统才行,所以夺命雷公狗分享两套安装linux的方法,这是centos的安装方法,,, 管理员默认帐号为:root,密码则是刚才您输入的那个...

  4. PTPX中的time_based analysis

    根据VCD文件的type,PTPX支持instantaneous peak power analysis和cycle_accurate peak power analysis. Time-Based ...

  5. scan design rules

    为了更好的设计一个scan design,一些scan design的rule必须遵循. 1)tristate bus在shift mode下必须保持bus contention: 2)bidirec ...

  6. [MacOSX]

    When i run svn up in the folder, i got these error: svn: Error converting entry in directory 'XXXXX' ...

  7. android初体验——HelloWord

    一．新建项目: 打开 eclipse ,选择File – New – Android Application Project 输入项目名称,程序名称,包名. 包名不能重复,它是项目的唯一标示,我理解为 ...

  8. Yii框架，在页面输出执行sql语句，方便调试

    1.下载yiidebugtb,并且放入到 application.extensions.yiidebugtb 目录 2.修改main.php,加入如下代码: 'log'=>array( 'cla ...

  9. OpenStack 虚拟机监控方案确定

    Contents [hide] 1 监控方案调研过程 1.1 1. 虚拟机里内置监控模块 1.2 2. 通过libvirt获取虚拟机数据监控. 2 a.测试openstack的自待组件ceilomet ...

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

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