1
<HTML>
2<HEAD>
3<TITLE>滚动效果</TITLE>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5</HEAD>
6<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0>
7<table>
8<tr><td style="padding: 5">
9<div id="testDiv" style="border: buttonface 2 solid">
10<img src="http://bbs.blueidea.com/images/blue/logo.gif">
11</div>
12
<script language="JScript">
13
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
14
{
15 var scrollDiv = obj
16 var scrollContent = document.createElement("span")
17 scrollContent.style.position = "absolute"
18 scrollDiv.applyElement(scrollContent, "inside")
19 var displayWidth = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth)
20 var displayHeight = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)
21 var contentWidth = scrollContent.offsetWidth
22 var contentHeight = scrollContent.offsetHeight
23 var scrollXItems = Math.ceil(displayWidth / contentWidth) + 1
24 var scrollYItems = Math.ceil(displayHeight / contentHeight) + 1
25 scrollDiv.style.width = displayWidth
26 scrollDiv.style.height = displayHeight
27 scrollDiv.style.overflow = "hidden"
28 scrollDiv.setAttribute("state", "stop")
29 scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
30 scrollDiv.setAttribute("direction", direction ? direction : "left")
31 scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
32 scrollContent.style.zoom = scrollDiv.zoom
33 var scroll_script = "var scrollDiv = " + scrollDiv.uniqueID +"\n"+
34 "var scrollObj = " + scrollContent.uniqueID +"\n"+
35 "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+
36 "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+
37 "var scrollx = scrollObj.runtimeStyle.pixelLeft" +"\n"+
38 "var scrolly = scrollObj.runtimeStyle.pixelTop" +"\n"+
39 "switch (scrollDiv.state.toLowerCase())" +"\n"+
40 "{" +"\n"+
41 "case ('scroll') :" +"\n"+
42 "switch (scrollDiv.direction)" +"\n"+
43 "{" +"\n"+
44 "case ('left') :" +"\n"+
45 "scrollx = (--scrollx) % contentWidth" +"\n"+
46 "break" +"\n"+
47 "case ('right') :" +"\n"+
48 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
49 "break" +"\n"+
50 "case ('up') :" +"\n"+
51 "scrolly = (--scrolly) % contentHeight" +"\n"+
52 "break" +"\n"+
53 "case ('down') :" +"\n"+
54 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
55 "break" +"\n"+
56 "case ('left_up') :" +"\n"+
57 "scrollx = (--scrollx) % contentWidth" +"\n"+
58 "scrolly = (--scrolly) % contentHeight" +"\n"+
59 "break" +"\n"+
60 "case ('left_down') :" +"\n"+
61 "scrollx = (--scrollx) % contentWidth" +"\n"+
62 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
63 "break" +"\n"+
64 "case ('right_up') :" +"\n"+
65 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
66 "scrolly = (--scrolly) % contentHeight" +"\n"+
67 "break" +"\n"+
68 "case ('right_down') :" +"\n"+
69 "scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+
70 "scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+
71 "break" +"\n"+
72 "default :" +"\n"+
73 "return" +"\n"+
74 "}" +"\n"+
75 "scrollObj.runtimeStyle.left = scrollx" +"\n"+
76 "scrollObj.runtimeStyle.top = scrolly" +"\n"+
77 "break" +"\n"+
78 "case ('stop') :" +"\n"+
79 "case ('drag') :" +"\n"+
80 "default :" +"\n"+
81 "return" +"\n"+
82 "}"
83 var contentNode = document.createElement("span")
84 contentNode.runtimeStyle.position = "absolute"
85 contentNode.runtimeStyle.width = contentWidth
86 scrollContent.applyElement(contentNode, "inside")
87 for (var i=0; i <= scrollXItems; i++)
88 {
89 for (var j=0; j <= scrollYItems ; j++)
90 {
91 if (i+j == 0) continue
92 var tempNode = contentNode.cloneNode(true)
93 var contentLeft, contentTop
94 scrollContent.insertBefore(tempNode)
95 contentLeft = contentWidth * i
96 contentTop = contentHeight * j
97 tempNode.runtimeStyle.left = contentLeft
98 tempNode.runtimeStyle.top = contentTop
99
}
100 }
101 scrollDiv.onpropertychange = function()
102 {
103 var propertyName = window.event.propertyName
104 var propertyValue = eval("this." + propertyName)
105 switch(propertyName)
106 {
107 case "zoom" :
108 var scrollObj = this.children[0]
109 scrollObj.runtimeStyle.zoom = propertyValue
110 var content_width = scrollObj.children[0].offsetWidth * propertyValue
111 var content_height = scrollObj.children[0].offsetHeight * propertyValue
112 scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width)
113 scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height)
114 break
115 }
116 }
117 scrollDiv.onlosecapture = function()
118 {
119 this.state = this.tempState ? this.tempState : this.state
120 this.runtimeStyle.cursor = ""
121 this.removeAttribute("tempState")
122 this.removeAttribute("start_x")
123 this.removeAttribute("start_y")
124 this.removeAttribute("default_left")
125 this.removeAttribute("default_top")
126 }
127 scrollDiv.onmousedown = function()
128 {
129 if (this.state != "drag") this.setAttribute("tempState", this.state)
130 this.state = "drag"
131 this.runtimeStyle.cursor = "default"
132 this.setAttribute("start_x", event.clientX)
133 this.setAttribute("start_y", event.clientY)
134 this.setAttribute("default_left", this.children[0].style.pixelLeft)
135 this.setAttribute("default_top", this.children[0].style.pixelTop)
136 this.setCapture()
137 }
138scrollDiv.onmousemove = function()
139 {
140 if (this.state != "drag") return
141 var scrollx = scrolly = 0
142 var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1
143 var content_width = this.children[0].children[0].offsetWidth * zoomValue
144 var content_Height = this.children[0].children[0].offsetHeight * zoomValue
145 if (this.drag == "horizontal" || this.drag == "both")
146 {
147 scrollx = this.default_left + event.clientX - this.start_x
148 scrollx = -content_width + scrollx % content_width
149 this.children[0].runtimeStyle.left = scrollx
150 }
151 if (this.drag == "vertical" || this.drag == "both")
152 {
153 scrolly = this.default_top + event.clientY - this.start_y
154 scrolly = -content_Height + scrolly % content_Height
155 this.children[0].runtimeStyle.top = scrolly
156 }
157 }
158 scrollDiv.onmouseup = function()
159 {
160 this.releaseCapture()
161 }
162
163 scrollDiv.state = "scroll"
164 setInterval(scroll_script, speed ? speed : 20)
165
}
166</script>
167<script language="JScript">
168window.onload = new Function("scroll(document.all['testDiv'], 325)")
169</script>
170<br>
171<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
172<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>
173<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>
174<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>
175<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>
176<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>
177<br>
178缩放：
179<select onchange="testDiv.zoom = this.options[selectedIndex].value">
180 <option value=1>100%</option>
181 <option value=2>200%</option>
182 <option value=3>300%</option>
183</select>
184托动范围：
185<select onchange="testDiv.drag = this.options[selectedIndex].value">
186 <option value="both">随意</option>
187 <option value="horizontal" selected>横向</option>
188 <option value="vertical">纵向</option>
189</select>
190</td></tr>
191</table>
192</BODY>
193</HTML>
194
<HTML> 2
<HEAD> 3
<TITLE>滚动效果</TITLE> 4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5
</HEAD> 6
<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0> 7
<table> 8
<tr><td style="padding: 5"> 9
<div id="testDiv" style="border: buttonface 2 solid"> 10
<img src="http://bbs.blueidea.com/images/blue/logo.gif"> 11
</div> 12
<script language="JScript"> 
13
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed) 14
{ 
15
var scrollDiv = obj 16
var scrollContent = document.createElement("span") 17
scrollContent.style.position = "absolute" 18
scrollDiv.applyElement(scrollContent, "inside") 19
var displayWidth = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth) 20
var displayHeight = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth) 21
var contentWidth = scrollContent.offsetWidth 22
var contentHeight = scrollContent.offsetHeight 23
var scrollXItems = Math.ceil(displayWidth / contentWidth) + 1 24
var scrollYItems = Math.ceil(displayHeight / contentHeight) + 1 25
scrollDiv.style.width = displayWidth 26
scrollDiv.style.height = displayHeight 27
scrollDiv.style.overflow = "hidden" 28
scrollDiv.setAttribute("state", "stop") 29
scrollDiv.setAttribute("drag", drag ? drag : "horizontal") 30
scrollDiv.setAttribute("direction", direction ? direction : "left") 31
scrollDiv.setAttribute("zoom", zoom ? zoom : 1) 32
scrollContent.style.zoom = scrollDiv.zoom 33
var scroll_script = "var scrollDiv = " + scrollDiv.uniqueID +"\n"+ 34
"var scrollObj = " + scrollContent.uniqueID +"\n"+ 35
"var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+ 36
"var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+ 37
"var scrollx = scrollObj.runtimeStyle.pixelLeft" +"\n"+ 38
"var scrolly = scrollObj.runtimeStyle.pixelTop" +"\n"+ 39
"switch (scrollDiv.state.toLowerCase())" +"\n"+ 40
"{" +"\n"+ 41
"case ('scroll') :" +"\n"+ 42
"switch (scrollDiv.direction)" +"\n"+ 43
"{" +"\n"+ 44
"case ('left') :" +"\n"+ 45
"scrollx = (--scrollx) % contentWidth" +"\n"+ 46
"break" +"\n"+ 47
"case ('right') :" +"\n"+ 48
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 49
"break" +"\n"+ 50
"case ('up') :" +"\n"+ 51
"scrolly = (--scrolly) % contentHeight" +"\n"+ 52
"break" +"\n"+ 53
"case ('down') :" +"\n"+ 54
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 55
"break" +"\n"+ 56
"case ('left_up') :" +"\n"+ 57
"scrollx = (--scrollx) % contentWidth" +"\n"+ 58
"scrolly = (--scrolly) % contentHeight" +"\n"+ 59
"break" +"\n"+ 60
"case ('left_down') :" +"\n"+ 61
"scrollx = (--scrollx) % contentWidth" +"\n"+ 62
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 63
"break" +"\n"+ 64
"case ('right_up') :" +"\n"+ 65
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 66
"scrolly = (--scrolly) % contentHeight" +"\n"+ 67
"break" +"\n"+ 68
"case ('right_down') :" +"\n"+ 69
"scrollx = -contentWidth + (++scrollx) % contentWidth" +"\n"+ 70
"scrolly = -contentHeight + (++scrolly) % contentHeight" +"\n"+ 71
"break" +"\n"+ 72
"default :" +"\n"+ 73
"return" +"\n"+ 74
"}" +"\n"+ 75
"scrollObj.runtimeStyle.left = scrollx" +"\n"+ 76
"scrollObj.runtimeStyle.top = scrolly" +"\n"+ 77
"break" +"\n"+ 78
"case ('stop') :" +"\n"+ 79
"case ('drag') :" +"\n"+ 80
"default :" +"\n"+ 81
"return" +"\n"+ 82
"}" 83
var contentNode = document.createElement("span") 84
contentNode.runtimeStyle.position = "absolute" 85
contentNode.runtimeStyle.width = contentWidth 86
scrollContent.applyElement(contentNode, "inside") 87
for (var i=0; i <= scrollXItems; i++) 88
{ 89
for (var j=0; j <= scrollYItems ; j++) 90
{ 91
if (i+j == 0) continue 92
var tempNode = contentNode.cloneNode(true) 93
var contentLeft, contentTop 94
scrollContent.insertBefore(tempNode) 95
contentLeft = contentWidth * i 96
contentTop = contentHeight * j 97
tempNode.runtimeStyle.left = contentLeft 98
tempNode.runtimeStyle.top = contentTop 99
} 100
} 101
scrollDiv.onpropertychange = function() 102
{ 103
var propertyName = window.event.propertyName 104
var propertyValue = eval("this." + propertyName) 105
switch(propertyName) 106
{ 107
case "zoom" : 108
var scrollObj = this.children[0] 109
scrollObj.runtimeStyle.zoom = propertyValue 110
var content_width = scrollObj.children[0].offsetWidth * propertyValue 111
var content_height = scrollObj.children[0].offsetHeight * propertyValue 112
scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width) 113
scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height) 114
break 115
} 116
} 117
scrollDiv.onlosecapture = function() 118
{ 119
this.state = this.tempState ? this.tempState : this.state 120
this.runtimeStyle.cursor = "" 121
this.removeAttribute("tempState") 122
this.removeAttribute("start_x") 123
this.removeAttribute("start_y") 124
this.removeAttribute("default_left") 125
this.removeAttribute("default_top") 126
} 127
scrollDiv.onmousedown = function() 128
{ 129
if (this.state != "drag") this.setAttribute("tempState", this.state) 130
this.state = "drag" 131
this.runtimeStyle.cursor = "default" 132
this.setAttribute("start_x", event.clientX) 133
this.setAttribute("start_y", event.clientY) 134
this.setAttribute("default_left", this.children[0].style.pixelLeft) 135
this.setAttribute("default_top", this.children[0].style.pixelTop) 136
this.setCapture() 137
} 138
scrollDiv.onmousemove = function() 139
{ 140
if (this.state != "drag") return 141
var scrollx = scrolly = 0 142
var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1 143
var content_width = this.children[0].children[0].offsetWidth * zoomValue 144
var content_Height = this.children[0].children[0].offsetHeight * zoomValue 145
if (this.drag == "horizontal" || this.drag == "both") 146
{ 147
scrollx = this.default_left + event.clientX - this.start_x 148
scrollx = -content_width + scrollx % content_width 149
this.children[0].runtimeStyle.left = scrollx 150
} 151
if (this.drag == "vertical" || this.drag == "both") 152
{ 153
scrolly = this.default_top + event.clientY - this.start_y 154
scrolly = -content_Height + scrolly % content_Height 155
this.children[0].runtimeStyle.top = scrolly 156
} 157
} 158
scrollDiv.onmouseup = function() 159
{ 160
this.releaseCapture() 161
} 162
163
scrollDiv.state = "scroll" 164
setInterval(scroll_script, speed ? speed : 20) 165
} 166
</script> 167
<script language="JScript"> 168
window.onload = new Function("scroll(document.all['testDiv'], 325)") 169
</script> 170
<br> 171
<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button> 172
<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button> 173
<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button> 174
<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button> 175
<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button> 176
<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button> 177
<br> 178
缩放： 179
<select onchange="testDiv.zoom = this.options[selectedIndex].value"> 180
<option value=1>100%</option> 181
<option value=2>200%</option> 182
<option value=3>300%</option> 183
</select> 184
托动范围： 185
<select onchange="testDiv.drag = this.options[selectedIndex].value"> 186
<option value="both">随意</option> 187
<option value="horizontal" selected>横向</option> 188
<option value="vertical">纵向</option> 189
</select> 190
</td></tr> 191
</table> 192
</BODY> 193
</HTML>194