注：预览效果请点击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> |
原文：http://www.cnblogs.com/ChenXu-net/p/3658353.html