一个可以上下左右滚动的经典代码。
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
}
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![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/InBlock.gif)
71
![](/Images/OutliningIndicators/InBlock.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/InBlock.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/InBlock.gif)
88
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/InBlock.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/InBlock.gif)
99
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
100
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
101
![](/Images/OutliningIndicators/InBlock.gif)
102
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/InBlock.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/InBlock.gif)
115
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
116
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/InBlock.gif)
124
![](/Images/OutliningIndicators/InBlock.gif)
125
![](/Images/OutliningIndicators/InBlock.gif)
126
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/InBlock.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/InBlock.gif)
137
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
138
![](/Images/OutliningIndicators/InBlock.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
151
![](/Images/OutliningIndicators/InBlock.gif)
152
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
153
![](/Images/OutliningIndicators/InBlock.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/InBlock.gif)
156
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
157
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
158
![](/Images/OutliningIndicators/InBlock.gif)
159
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
160
![](/Images/OutliningIndicators/InBlock.gif)
161
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
162
![](/Images/OutliningIndicators/InBlock.gif)
163
![](/Images/OutliningIndicators/InBlock.gif)
164
![](/Images/OutliningIndicators/InBlock.gif)
165
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
166
![](/Images/OutliningIndicators/None.gif)
167
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
168
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
169
![](/Images/OutliningIndicators/None.gif)
170
![](/Images/OutliningIndicators/None.gif)
171
![](/Images/OutliningIndicators/None.gif)
172
![](/Images/OutliningIndicators/None.gif)
173
![](/Images/OutliningIndicators/None.gif)
174
![](/Images/OutliningIndicators/None.gif)
175
![](/Images/OutliningIndicators/None.gif)
176
![](/Images/OutliningIndicators/None.gif)
177
![](/Images/OutliningIndicators/None.gif)
178
![](/Images/OutliningIndicators/None.gif)
179
![](/Images/OutliningIndicators/None.gif)
180
![](/Images/OutliningIndicators/None.gif)
181
![](/Images/OutliningIndicators/None.gif)
182
![](/Images/OutliningIndicators/None.gif)
183
![](/Images/OutliningIndicators/None.gif)
184
![](/Images/OutliningIndicators/None.gif)
185
![](/Images/OutliningIndicators/None.gif)
186
![](/Images/OutliningIndicators/None.gif)
187
![](/Images/OutliningIndicators/None.gif)
188
![](/Images/OutliningIndicators/None.gif)
189
![](/Images/OutliningIndicators/None.gif)
190
![](/Images/OutliningIndicators/None.gif)
191
![](/Images/OutliningIndicators/None.gif)
192
![](/Images/OutliningIndicators/None.gif)
193
![](/Images/OutliningIndicators/None.gif)
194
![](/Images/OutliningIndicators/None.gif)