js css 构建滚动边框

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

posted @ 2014-04-11 11:50 陈大欠阅读(672) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

hello, world

developers change the world by coding - cnblog

js css 构建滚动边框

公告

常用链接

积分与排名

随笔分类 (33)

阅读排行榜

评论排行榜

推荐排行榜

最新评论