图片或者文字滚动代码

图片滚动代码：

<MARQUEEοnmοuseοver=this.stop() οnmοuseοut=this.start()scrollAmount=7><U><FONTcolor=red><P><imgsrc="e:\coupon.jpg" height=200px width=400px></P></FONT></U></MARQUEE>

文字的话就把img标签里替换成想要的文字就可以了，默认是左右滚动，如果想上下滚动的话在marquee标签中加入direction=up就OK了……

这些代码是最简洁的了，但是兼容性不太好，在有的浏览器可能会不滚动，而且图片滚动时容易在滚动结束时有大量空白出现，至于解决办法，可是本文章的最后看到，下面是js写的滚动代码：

<scriptlanguage=JavaScript1.2>

//设置下面的参数(宽度，高度和背景色)可以得到不同的显示效果；
var scrollerwidth=500
var scrollerheight=20
var scrollerbgcolor='#f1f1f1'//支持英文颜色，如red,blue等

//下面的参数，不想使用背景图的话设为空；
var scrollerbackground=''

//下面的参数设置显示内容，可以使用HTML语法改变字体，大小和颜色及连接等；
var messages=new Array()
messages[0]="::::::::::::::::::::: 示例滚动新闻:::::::::::::::::::::"
messages[1]="<ahref='javascript:void(0)'>盼望已久的《文歌随笔》开通了……</a>"
messages[2]="<ahref='javascript:void(0)'>热烈庆祝《 文歌随笔》日访问人数超过1000人</a>"
messages[3]="<ahref='javascript:void(0)'>欢迎光临《文歌随笔》，我是黑蝙蝠</a>"

///下面的代码不要改变//

if (messages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval（whichlayer)
if(tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",2000)
setTimeout("move2(document.main.document.second)",2000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval（whichlayer)
if(tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",2000)
setTimeout("move1(document.main.document.first)",2000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval（whichdiv)
if(tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",2000)
setTimeout("move4(second2)",2000)
return
}
if(tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval（whichdiv)
if(tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",2000)
setTimeout("move3(first2)",2000)
return
}
if(tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
second2.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}

window.οnlοad=startscroll
</script>
<ilayer id=mainwidth="&{scrollerwidth};"height="&{scrollerheight};"bgcolor="&{scrollerbgcolor};" visibility="hide"top="0">
<layer id=first width="300" top="1"left="0">
<script language=JavaScript1.2>
if (document.layers)
document.write(messages[0])
</script>
</layer>
<layer id=second width="300" visibility="hide"top="0" left="0">
<script language=JavaScript1.2>
if (document.layers)
document.write(messages[1])
</script>
</layer>
</ilayer>
<script language=JavaScript1.2>
if (document.all){
document.writeln('<span id="main2"style="position:relative; width:'+scrollerwidth+';height:'+scrollerheight+'; overflow:hiden;background-color:'+scrollerbgcolor+';background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+'; height:'+scrollerheight+'; clip:rect(0'+scrollerwidth+' '+scrollerheight+' 0); left:0;top:0">')
document.writeln('<div id="first2"style="position:absolute; width:'+scrollerwidth+'; left:0;top:1;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2"style="position:absolute; width:'+scrollerwidth+'; left:0; top:0;visibility:hidden">')
document.write(messages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>

marquee图片无缝滚动

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:

-----------------------------------------------------------------------

图片向上无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x_x("demo");
var tab1=document.getElementByIdx_x_x("demo1");
var tab2=document.getElementByIdx_x_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function(){clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

------------------------------------------------------------

图片向下无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x_x("demo");
var tab1=document.getElementByIdx_x_x("demo1");
var tab2=document.getElementByIdx_x_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function(){clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

--------------------------------------------------------

图片向左无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x_x("demo");
var tab1=document.getElementByIdx_x_x("demo1");
var tab2=document.getElementByIdx_x_x("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

------------------------------------------------------

图片向右无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x_x("demo");
var tab1=document.getElementByIdx_x_x("demo1");
var tab2=document.getElementByIdx_x_x("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>