作者：Linger 2007-03-15 20:58:50 



运用下面的代码，加入你所希望看到的文字，就能使你的博客外观发生不同哦！
 滚动文字代码： <marquee scrollAmount=3 width=200>灯火阑珊</marquee>（文字可随意替换）效果图：
灯火阑珊
滚动图片代码： <marquee scrollAmount=3 width=200><IMG src="http://images.blogcn.com/2005/9/8/8/yanxin16,20050908143744.gif" border=0></marquee>（图片链接地址可随意替换）效果图：
450)this.style.width=450;" border=0>
各参数详解： scrollAmount，它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。 width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。 direction，表示滚动的方向，默认为从右向左。可选的值有right、down、up。滚动方向分别为：right表示从左到右，up表示从下到上，down表示从上到下。 behavior，用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果），指的是滚动一次，然后停止滚动
给滚动字幕加超级链接，只要在文字外面加上<a href=链接地址>和</a>就可以了。如代码为：<marquee scrollAmount=3 width=200><a href="/http://www.blogcn.com/user54/yanxin16/index.html>灯火阑珊</a></marquee> 效果图： 灯火阑珊

当鼠标停留在文字上，文字停止 代码为：<marquee scrollAmount=3 width=200 οnmοuseοver=stop() οnmοuseοut=start()>灯火阑珊</marquee> 效果图：
灯火阑珊交替效果代码为：<marquee scrollAmount=3 width=200 behavior=alternate>灯火阑珊</marquee> 效果图： 灯火阑珊多行文本向上滚动代码为：<marquee scrollAmount=3 width=200 height=100 direction=up>·蓦然回首！<br>·灯火阑珊<br>·在水一方<p></marquee> 效果图： ·蓦然回首！ ·灯火阑珊 ·在水一方
width和height的值可以根据自身页面大小调整，direction为down时，向下滚动。<br>为换行空格。同理，文字也可以改为图片链接。
改变滚动字幕的颜色代码为：<marquee scrollAmount=3 width=200><font color=#e61a94 >爱是玫瑰色的！</font></marquee>。效果图： 爱是玫瑰色的！颜色代码可依据个人喜好，更换。
 
 
<marquee scrollamount=1> 文字很慢滚。 </marquee> 文字很慢滚。<marquee οnmοuseοver=this.stop() οnmοuseοut=this.start() > 鼠标放上去停止滚动，移开继续滚动。 </marquee> 鼠标放上去停止滚动，移开继续滚动。<marquee direction=left scrollamount=3> 文字向左滚。 </marquee> 文字向左滚。<marquee direction=right scrollamount=3> 文字向右滚。 </marquee> 文字向右滚。<marquee direction=up scrollamount=3> 文字向上滚。 </marquee> 文字向上滚。<marquee direction=down scrollamount=3> 文字向下滚。 </marquee> 文字向下滚。<marquee scrollamount=3 behavior=alternate> 文字来回滚。 </marquee> 文字来回滚。<marquee scrolldelay=500 scrollamount=100>走一步，停一停！</marquee> 走一步，停一停！
<marquee bgcolor=aaaaee>设置底色的文字</marquee> 
 
 
1.向左滚动代码： 
<marquee scrollAmount=2 width=300>你想滚动什么</marquee>
    2.图片滚动代码：
<marquee scrollAmount=2 width=300><IMG src="http://yuyuflower.52blog.net/user1/22713/upload/20058308120.gif" border=0></marquee>
    3.滚动字幕连接代码:
<marquee scrollAmount=2 width=300><a href=http://yingling21.52blog.net/user1/26852/index.shtml>消失部落</a></marquee>
 点击消失部落就可以进入了       4.鼠标停留在文字上，文字停止滚动
<marquee scrollAmount=2 width=300 οnmοuseοver=stop() οnmοuseοut=start()>文字内容</marquee>
    5.多行文本向上滚动:
<marquee scrollAmount=2 width=300 height=160 direction=up>我不在乎有满身的伤口<br>在乎的只是你一句话<br>为什么你都不能回答我呢?<p>·<a href=http://yingling21.52blog.net/user1/26852/index.shtml>消失部落</a></marquee>



 
 
更多技术文章请参看施昌权的个人网站： http://www.joyvc.cn 
 

本文以文字滚动为例，展示代码； 

要做图片滚动的朋友，直接在li标签中将文字替换成图片调试至合适高度即可，也可以参考下一篇JS实现图片幻灯片效果，不同的方法哦：

完整代码如下



css 代码



<style type="text/css">
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
ul,li{list-style:none;}
a{ text-decoration:none; color:#333;}
 #demo{
    overflow:hidden; /*溢出的部分不显示*/
    width:290px;
    height:165px;/*高度数值要确切，避免demo1与demo2之间的距离过大或重叠*/
    padding:5px;
    margin:50px auto;
    background:#ccc;
    }
#express li{
      list-style:none;
      font-size:15px;
      height:35px;
      cursor:pointer;
      text-align: center
      }
</style>



html 代码



<div id="demo">
<!-- 一个盒子里面包着两个一样的div，随后用js将demo1内容复制给demo2，其实用html直接在demo2里面添加ul、li效果也一样，但它占地方啊，对吧-->
    <div id="demo1">
        <ul id="express">
            <li>文字无缝滚动第一条</li>
            <li>文字无缝滚动第二条</li>
            <li>文字无缝滚动第三条</li>
            <li>文字无缝滚动第四条</li>
            <li>文字无缝滚动第五条</li>
        </ul>
    </div>
    <div id="demo2"></div>
<!-- 两个交替展示，形成内容循环。 -->
</div>



javascript 代码



<script type="text/javascript">
  //获取三个demo的元素对象，并把id=demo1的内容赋值给id=demo2
  var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  demo2.innerHTML=demo1.innerHTML;
  //给demo1,demo2加相同的高度
  demo1.style.height=demo.offsetHeight+"px";
  demo2.style.height=demo.offsetHeight+"px";

  //定义向上滚动函数
  function scrollup()
  {
    //如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
    if(demo.scrollTop>=demo.offsetHeight)
    {
      demo.scrollTop=0;
    }else
    {
      demo.scrollTop++;
    }
  }

  //setInterval()计时器，功能是从载入页面后每隔指定的时间执行一次代码
  //30为毫秒数，数值越小滚动越快
  var t=window.setInterval("scrollup()",30);
</script>



附加功能  鼠标悬停



 //鼠标悬停，鼠标离开继续滚动
  demo.onmouseover=function(){
                 //取消计时器
                 clearInterval(t);
                 }
   demo.onmouseout=function(){
                 //添加计时器
                 t=window.setInterval("scrollup()",30);
                 }

利用JavaScript实现文字滚动效果
具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>向上无间隔滑动</title>
<script>
   window.onload = function() {
	 var speed=30;
	 var b=document.getElementById("b");
	 var a=document.getElementById("a");
	 var roll=document.getElementById("roll");
	 b.innerHTML=a.innerHTML; //克隆a为b
	 function Marquee1(){
		//当滚动至a与b交界时
		if(b.offsetTop-roll.scrollTop<=0){ 
		 roll.scrollTop-=a.offsetHeight; //roll跳到最顶端
		}else{
		 roll.scrollTop++
		}
	}
	var MyMar1=setInterval(Marquee1,speed)//设置定时器
	//鼠标移上时清除定时器达到滚动停止的目的
	roll.οnmοuseοver=function() {clearInterval(MyMar1)}
	//鼠标移开时重设定时器
	roll.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
}
</script>
</head>
  
<body>
<div id="roll" style="overflow:hidden;height:253px;width:410px; background:#36F"> 
<div id="a">
 <!-- 将<p></p>标签中的文字变成图片即可得到图片滚动的效果 -->
<p><h3>青春————席慕容</h3>
<p>所有的结局都已写好<br>
所有的泪水也都已启程<br>
却忽然忘了是怎么样的一个开始<br>
在那个古老的不再回来的夏日<br>
无论我如何的去追索<br>
年轻的你只如云影掠过<br>
而你微笑的面容极浅极淡<br>
逐渐隐没在日落后的群岚<br>
逐翻开那发黄的扉页<br>
命运将它装订的极为拙劣<br>
含着泪 我一读再读<br>
却不得不承认<br>
青春<br>
是一本太仓促的书<br></p>
<p><h3>青春————席慕容</h3>
<p>所有的结局都已写好<br>
所有的泪水也都已启程<br>
却忽然忘了是怎么样的一个开始<br>
在那个古老的不再回来的夏日<br>
无论我如何的去追索<br>
年轻的你只如云影掠过<br>
而你微笑的面容极浅极淡<br>
逐渐隐没在日落后的群岚<br>
逐翻开那发黄的扉页<br>
命运将它装订的极为拙劣<br>
含着泪 我一读再读<br>
却不得不承认<br>
青春<br>
是一本太仓促的书<br></p>
</div>
<div id="b"></div>
</div>
</body>
</html>

 
 
1、以源码方复制粘贴以下代码。
2、源码中背景图片地址和文字换成自己想要的。
3、回到设计窗口，调整文字和图片。
4、相关属于可以自己修改。
<p align="center"></p>
<p align="left"></p>
<table style="WIDTH: 500px" cellpadding="15">
<tbody>
<tr>
<td style="BACKGROUND: url(http://img4.ph.126.net/0RAZG_sNbBGVqyUukwHJNA==/1324902715394848394.jpg)">
<p>
</p><div align="center">
<marquee style="WIDTH: 700px; HEIGHT:400px" scrollamount="2" scrolldelay="1" direction="up" width="435" height="256">
<div align="left"><strong><font size="5"><font color="#ffffff"><center>输入文字</center></font></font></strong><font size="5"><font color="#ffffff"><br></font></font></div></marquee></div>
<p></p></td></tr></tbody></table>