可以上下左右滚动的经典代码 - Coding让生活更美好

公告

可以上下左右滚动的经典代码

一个可以上下左右滚动的经典代码。

<HTML>
2

<HEAD>
3

<TITLE>滚动效果</TITLE>
4

</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

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

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

posted on 2008-03-08 15:58 Coding让生活更美好阅读(643) 评论(0) 收藏举报

刷新页面返回顶部