javascript 模拟Marquee文字向左均匀滚动代码

JavaScript011

javascript 模拟Marquee文字向左均匀滚动代码,第1张

可以实现匀速、无缝、加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度、高度、速度均可以设定。

Js文字向左运动

var

marqueewidth=350

var

marqueeheight=22

var

speed=5

var

marqueecontents='欢迎光临脚本之家

网页特效栏目,精品特效全收罗!'

if

(document.all)

document.write(''+marqueecontents+'')

function

regenerate(){

window.location.reload()

}

function

regenerate2(){

if

(document.layers){

setTimeout("window.onresize=regenerate",450)

intializemarquee()

}

}

function

intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.width

scrollit()

}

function

scrollit(){

if

(document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){

document.cmarquee01.document.cmarquee02.left-=speed

setTimeout("scrollit()",100)

}

else{

document.cmarquee01.document.cmarquee02.left=marqueewidth

scrollit()

}

}

window.onload=regenerate2

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

需要js的配合一下是一个非常好用的一个html代码,可以试试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>一行多列文字循环滚动带停顿-</TITLE>

<meta name="keywords" content="网页特效" />

<meta name="description" content="" />

<META http-equiv=Content-Type content="text/html charset=utf-8">

<style type="text/css">

ul {height:200px

padding-right: 0px

padding-left: 0px

padding-bottom: 0px

margin: 0px

padding-top: 0px

}

#announcement {

width:300px

height:200px

background:url(img/menu_bg.gif) repeat

overflow: hidden

}

#announcement div {

border: #e6e6e6 1px solid

padding:0px 10px 0px 10px

overflow-y:hidden

line-height: 24px

height:100px

}

#announcement li {

font-size: 12px

float: left

list-style-type: none

margin-right: 20px

padding-left: 10px

background: url(img/arrow_right.gif) no-repeat 0px 50%

white-space: nowrap

}

#announcement a {

text-decoration: none

}

#announcement a:hover {

text-decoration:underline

}

</style>

</HEAD>

<BODY>

<DIV id="announcement" onMouseOver="if(!anncount) {clearTimeout(annst)annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay)">

  <DIV id="scrbody">

    <ul>

     <li>

     <a href="#" target="_blank">jQuery 类似腾讯网的图片幻灯特效(可自动播放)</a>

     </li>

     <li>

     <a href="#/JS" target="_blank">VB版增强型Windows任务管理器</a>

     </li>

     <li>

     <a href="#/JS/texiao"target="_blank">JQuery Tip多风格链接提示框</a>

     </li>

     <li>

     <a href="#/JS/ad" target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>

     </li>

     <li>

     <a href="#/html+css" target="_blank">++连连看游戏源码附外挂</a>

     </li>

     <li>

     <a href="#/" target="_blank">基于API的VB HOOK钩子拦截程序</a>

     </li>

     <li>

     <a href="#/" target="_blank">VB 操作系统的一些常用小技巧集</a>

     </li>

     <li>

     <a href="#/js" target="_blank">xTree 标准的WEB菜单树(树形菜单)</a>

     </li>

    </ul>

  </DIV>

</DIV>

<script type="text/javascript">

function $(id)

{

   return document.getElementById(id)

}

var anndelay = 3000

var anncount = 0

var annheight = 24

var annst = 0

function announcementScroll()

{

   if( ! annst)

   {

      $('scrbody').innerHTML += '<br style="clear: both" />' + 

$('scrbody').innerHTML

      $('scrbody').scrollTop = 0

      if($('scrbody').scrollHeight > annheight * 3)

      {

         annst = setTimeout('announcementScroll()', anndelay)

      }

      else

      {

         $('announcement').onmouseover = $('announcement').onmouseout = null

      }

      return

   }

   if(anncount == annheight)

   {

      if($('scrbody').scrollHeight - annheight <= $('scrbody').scrollTop)

      {

         $('scrbody').scrollTop = $('scrbody').scrollHeight / 2 - annheight

      }

      anncount = 0

      annst = setTimeout('announcementScroll()', anndelay)

   }

   else

   {

      $('scrbody').scrollTop ++ 

      anncount ++ 

      annst = setTimeout('announcementScroll()', 10)

   }

}

announcementScroll()

</script>

</BODY>

</HTML>