注：预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接.
完整代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html><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> |