有关图片或文字的连续滚动

kos — Tue, 20 Oct 2009 11:22:27 +0000

　　在处理滚动上，通常采用Marquee，只需要加上这个标签，给这个标签设定一个宽度和高度就能实现了，代码如下：



CODE
<marquee direction="up" height="100" width="300" style="background:#F6F6F6;border:1px #999999 solid;" onmouseout="this.start()" onMouseOver="this.stop()" scrollamount="2"> <p>这只是一个简单的例子</p> <p>仅仅利用marquee实现的滚动</p> <p>当然</p> <p>没有太多必要的话</p> <p>用这种滚动已经能让页面有动感了</p> </marquee> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　然而这样的滚动会出现一个问题，当marquee里面的内容滚动一次完成后，会出现一片空白，再重新滚动，会影响到页面的整体效果，要达到连续滚动则需要用js来控制，通过使用setTimeout和setInterval方法都能实现这样的功能，下面例子仅以setInterval为例作一个简单介绍。
代码如下：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <style type="text/css"> <!-- #Nomain{border: 1px #FFFF00 solid; padding:10px; width: 500px;} #Nodiv {background: #FFF;overflow:hidden;width: 500px; height:60px;} #Nocov {float: left;width:400%;} #Nocontent {float: left;} #Nofloat {float: left;} --> </style> <div id="Nomain"> <div id="Nodiv"> <div id="Nocov"> <div id="Nocontent">  </div> <div id="Nofloat"></div> </div> </div> </div> <script> var speed=10; var Nodiv=document.getElementById("Nodiv"); var Nocontent=document.getElementById("Nocontent"); var Nofloat=document.getElementById("Nofloat"); Nofloat.innerHTML=Nocontent.innerHTML; function Marquee(){ 	if(Nofloat.offsetWidth-Nodiv.scrollLeft<=0) 	Nodiv.scrollLeft-=Nocontent.offsetWidth; 	else{ 	Nodiv.scrollLeft++; 	} } var MyMar=setInterval(Marquee,speed); Nodiv.onmouseover=function() {clearInterval(MyMar)}; Nodiv.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </body> </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

说明一下，speed的值越大，移动越慢，反知，这里设置的是图片向左移动，你只需要稍加修改就可以让其向右移动，甚至向上，或向下移动都行！目前没发现有bug,如果有值得改进的地方，希望各位提出宝贵的意见！

散人笔记 » setInterval

有关图片或文字的连续滚动