Code1
说明：兼容火狐和IE，上下滚动代码需去掉HTML页面顶部一行!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""才有效果。相关图片请替换2
以下是HTML网页特效代码，点击运行按钮可查看效果：[html]<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）-JS特效学院|JsWeb.Cn</title>6
</head>7
<body><!--下面是向上滚动代码-->8
<div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;> 9
<div id=jsweb8_cn_top1> 10
<img src="http://jsweb8.cn/images/logo.gif"> 11
<img src="http://jsweb8.cn/images/logo.gif"> 12
<img src="http://jsweb8.cn/images/logo.gif"> 13
<img src="http://jsweb8.cn/images/logo.gif"> 14
<img src="http://jsweb8.cn/images/logo.gif"> 15
<img src="http://jsweb8.cn/images/logo.gif"> 16
<img src="http://jsweb8.cn/images/logo.gif"> 17
<img src="http://jsweb8.cn/images/logo.gif"> 18
<img src="http://jsweb8.cn/images/logo.gif"> 19
</div> 20
<div id=jsweb8_cn_top2></div> 21
</div> 22
<script>
23
var speed=30 24
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2 25
function Marquee1(){ 26
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时 27
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0) 28
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端 29
else{ 30
jsweb8_cn_top.scrollTop++;31
} 32
} 33
var MyMar1=setInterval(Marquee1,speed)//设置定时器 34
//鼠标移上时清除定时器达到滚动停止的目的 35
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)} 36
//鼠标移开时重设定时器 37
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} 38
</script>39
<!--向上滚动代码结束-->40
<br>41
<!--下面是向下滚动代码-->42
<div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;> 43
<div id=jsweb8_cn_bottom1> 44
<img src="http://jsweb8.cn/images/logo.gif"> 45
<img src="http://jsweb8.cn/images/logo.gif"> 46
<img src="http://jsweb8.cn/images/logo.gif"> 47
<img src="http://jsweb8.cn/images/logo.gif"> 48
<img src="http://jsweb8.cn/images/logo.gif"> 49
<img src="http://jsweb8.cn/images/logo.gif"> 50
<img src="http://jsweb8.cn/images/logo.gif"> 51
<img src="http://jsweb8.cn/images/logo.gif"> 52
<img src="http://jsweb8.cn/images/logo.gif"> 53
</div> 54
<div id=jsweb8_cn_bottom2></div> 55
</div> 56
<script> 57
var speed=30 58
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML 59
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight 60
function Marquee2(){ 61
if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0) 62
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight 63
else{ 64
jsweb8_cn_bottom.scrollTop-- 65
} 66
} 67
var MyMar2=setInterval(Marquee2,speed) 68
jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)} 69
jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} 70
</script>71
<!--向下滚动代码结束-->72
<br>73
<!--下面是向左滚动代码-->74
<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">75
<table cellpadding="0" cellspacing="0" border="0">76
<tr><td id="jsweb8_cn_left1" valign="top" align="center">77
<table cellpadding="2" cellspacing="0" border="0">78
<tr align="center">79
<td><img src="http://jsweb8.cn/images/logo.gif"></td>80
<td><img src="http://jsweb8.cn/images/logo.gif"></td>81
<td><img src="http://jsweb8.cn/images/logo.gif"></td>82
<td><img src="http://jsweb8.cn/images/logo.gif"></td>83
<td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>84
<td><img src="http://jsweb8.cn/images/logo.gif"></td>85
</tr>86
</table>87
</td>88
<td id="jsweb8_cn_left2" valign="top"></td>89
</tr>90
</table>91
</div>92
<script>93
var speed=30//速度数值越大速度越慢94
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML95
function Marquee3(){96
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)97
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth98
else{99
jsweb8_cn_left.scrollLeft++100
}101
}102
var MyMar3=setInterval(Marquee3,speed)103
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}104
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}105
</script>106
<!--向左滚动代码结束-->107
<br>108
<!--下面是向右滚动代码-->109
<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">110
<table cellpadding="0" cellspacing="0" border="0">111
<tr><td id="jsweb8_cn_right1" valign="top" align="center">112
<table cellpadding="2" cellspacing="0" border="0">113
<tr align="center">114
<td><img src="http://jsweb8.cn/images/logo.gif"></td>115
<td><img src="http://jsweb8.cn/images/logo.gif"></td>116
<td><img src="http://jsweb8.cn/images/logo.gif"></td>117
<td><img src="http://jsweb8.cn/images/logo.gif"></td>118
<td><img src="http://jsweb8.cn/images/logo.gif"></td>119
</tr>120
</table>121
</td>122
<td id="jsweb8_cn_right2" valign="top"></td>123
</tr>124
</table>125
</div>126
<script>127
var speed=30//速度数值越大速度越慢128
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML129
function Marquee4(){130
if(jsweb8_cn_right.scrollLeft<=0)131
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth132
else{133
jsweb8_cn_right.scrollLeft--134
}135
}136
var MyMar4=setInterval(Marquee4,speed)137
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}138
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}139
</script>140
<!--向右滚动代码结束-->141
<p></p>142
更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn" 143
target="_blank">www.jsweb8.cn</a>,转载请注明出处（JS特效学院）144
</body>145
</html>146
浙公网安备 33010602011771号