首页>新闻动态>网络新原创知识
区域文字模块向上滚动代码展示
首先如果文字向上滚动,那是其简单的,只需要使用以下的代码:

<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800">行的滚动的标题<br>第二条网站测试行</marquee>

当鼠标放上去的时候,会自动停止,这样用户就能详细看清每一行的文字,800是指这个滚动区域的px宽度,不设定高度的话,会随着行数的增加而自动上下延伸。

倘若由下往上走的文字,只想看到一行一行的向上走,这样一来是节省网站的布局的空间,二来看上去比较整洁,同时也显得不乱(全行滚动会显得很凌乱),就设置一下高度,比如25px,具体代码如下:

<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width="800" height="25">只显示一行的条的标题<br>只显示一行的第二条</marquee>

以上是区域、文字的滚动,当然设定一行的也只能是文字,如果加个背景等,也可以称之为区域。

运行结果如下,见附图一:


如果一个div,或是一个模块整体向上滚动,该如何弄呢,这需要另外一套代码,直接上代码:

<div id="demo" style="overflow:hidden;height:22px;width:950px;">
<div id="demo1">
<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
      <tr>
        <td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-

left:60px;">这是条新新闻的标题</a></td>
      </tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
      <tr>
        <td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-

left:60px;">这是第二条向上滚动的</a></td>
      </tr>
</table>
</div>
<div id="demo2"></div>
</div>

以下是脚本:

   var speed=50
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
   else{
   demo.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.onmouseover=function() {clearInterval(MyMar)}
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

运行结果如下,见附图二:


中间的这个代码:

<table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="#004a98">
      <tr>
        <td height="24" align="left" valign="top"><a target="_blank" href="#" style=" color:#FFFFFF; font-size:14px; padding-

left:60px;">这是第二条向上滚动的</a></td>
      </tr>
</table>

就是滚动的模块的内容,可以弄成table,也可以布局成div,当然这个模块的尺寸要与上面的id为demo的一致,否则排版会出错。
以上就是模块、文字、区域向上滚动的代码,通过以上的展示,相信大家应该都能理解了吧!



下一条:QQ收不到或发不了图片及解决方案
文章分类
热门文章
网站套餐 / 解决方案 / 客户案例 / 公司优势 / 新闻动态 / 主机域名 / 关于我们 / 返回首页
版权所有:南京希丁哥网络信息服务有限公司