注：预览效果请点击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. Android DatePickerDialog TimepickerDialog

    package com.example.myact5; import java.util.Calendar; import android.app.DatePickerDialog; import a ...

  2. 夺命雷公狗---DEDECMS----21dedecms按照地区取出电影内容

    我们现在要做的就是: 这些电影都是要按照地区来取出才可以的,但是我们arclist标签里面有没有按照条件来查找的地方,我们只好换套路了,要不然条条大路都不通,,,, 我们先来构造一条语句: 他这个标签 ...

  3. 在 wxWidgets 的介绍中看到的一句话

    3. wxwidgets提供的gui是大量使用宏的,这就意味着它是在尽可能的使用目标系统native的gui样式. ——你可以访问wxwidgets网站,看看那些开发的软件的截图,全是系统native ...

  4. PHP自动生成后台导航网址的最佳方法

    'http://www.jbxue.com'=> '脚本学堂首页', </script>

  5. 《Focus On 3D Terrain Programming》中一段代码的注释二

    取自<Focus On 3D Terrain Programming>中的一段: bool CTERRAIN::MakeTerrainFault( int iSize, int iIter ...

  6. 转：myeclipse 8.x 插件安装方法终极总结

    原文地址:http://shaomeng95.iteye.com/blog/945062 最近因为要指导新人顺便整理文档,懒得折腾eclipse,需要装的插件太多,于是乎装myeclipse 8.5吧 ...

  7. 关于陈冰、陈良乔以及《我的第一本C++书》【转】

    出处:如何在淘宝上卖出 600 本自己写的 C++ 入门书? 陈冰:<我的第一本C++书> 策划编辑,现为图灵公司副总编,<C程序设计伴侣>策划编辑 陈良乔:<我的第一本 ...

  8. linux常用命令简单介绍(netstat,awk,top,tail,head,less,more,cat,nl)

    1.netstat netstat -tnl | grep 443 (查看443端口是否被占用) root用户,用netstat -pnl | grep 443 (还可显示出占用本机443端口的进程P ...

  9. 由 "select *" 引发的“惨案”

    今天凌晨做发布, 要合并多个分数据库的表数据到主数据库中, 有 30+ 分数据库. 前面都比较顺利, 在临近结束时,突然发现一个字段的值插入错误. 有一个表 T,字段分别为 (f1, f2, f3, ...

  10. Delphi中如何将 Exe 程序或其他资料打包在内，使用时再释放使用（转）

    1.生成一个rc文件,文件格式如下: rname exefile "test.exe" //rname是资源名称 //exefile是资源类型 //text.exe是资源 资源类型 ...