注：预览效果请点击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. SPOJ COT3 Combat on a tree（Trie树、线段树的合并）

    题目链接:http://www.spoj.com/problems/COT3/ Alice and Bob are playing a game on a tree of n nodes.Each n ...

  2. POJ 1286 Necklace of Beads（Polya原理）

    Description Beads of red, blue or green colors are connected together into a circular necklace of n ...

  3. po line received is canceled(恢复PO被取消的余量)

    1張PO已部分收貨,後來由于某種原因,將部分收貨的PO明行取消,現在要對已收料的這一部分進行退貨處理,要怎麼做才好呢? [@more@]DATA COLLECTED===============COL ...

  4. qsort函数用法(转)

    qsort函数用法   qsort 功 能: 使用快速排序例程进行排序  用 法: void qsort(void *base, int nelem, int width, int (*fcmp)(c ...

  5. zw版【转发·台湾nvp系列Delphi例程】HALCON GenGridRegion

    zw版[转发·台湾nvp系列Delphi例程]HALCON GenGridRegion unit Unit1;interfaceuses Windows, Messages, SysUtils, Va ...

  6. 【GDI+】 线段 文字 定位的问题

    遇到一个看起来很简单的问题: 给定两个点,和一组文字,希望文字显示在线的附近并且居中显示.期望像这样的效果 进一步的抽象是: 1.根据文字的长度和高度,以及两个点,来获得文字的定位点(左上角点)的 2 ...

  7. Linux TTY框架【转】

    本文转载自:http://ju.outofmemory.cn/entry/281168 1. 前言 由于串口的缘故,TTY是Linux系统中最普遍的一类设备,稍微了解Linux系统的同学,对它都不陌生 ...

  8. 连接ssh反应很慢，卡，延迟

    1.关闭DNS反向解析在linux中,默认就是开启了SSH的反向DNS解析,这个会消耗大量时间,因此需要关闭.# vi /etc/ssh/sshd_configUseDNS=no 在配置文件中,虽然U ...

  9. UIView完全置顶的方法

    一般来说,若需要独立添加一个UIView,使其覆盖于整个应用窗口之上,是这样实现的: AppDelegate *app = (AppDelegate *)[[UIApplication sharedA ...

  10. 在ecshop顶部会员信息提示区显示会员等级

    会员登陆后,在顶部会员信息提示区显示会员等级会员登陆后会在顶部出现这样的提示:您好,test2, 欢迎您回来 ! 进入用户中心 |退出现在设想在会员名后面加上“会员等级”效果如下:您好,test2,  ...