制作滚动文字

时间:2012-04-11 11:13:39

标签: javascript

请,我不知道javascript但我想制作滚动文本。所有链接都不鼓励选择,所以我搜索了一个答案,我能够将插件复制到我的标题中。但是,它不起作用,我不知道为什么。可能是因为文件是用PHP保存还是错误使用?请帮忙,看看。

这是包含文件中的标题:

<body>
<div id="outer">
<div id="page">
<div id="header">
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
 $(document).ready(function(){

  // Add Scroller Object
  $jScroller.add("#scroller_container","#scroller","left",1);

  // Start Autoscroller
  $jScroller.start();
 });
</script>

<div id="scroller_container">
 <div id="scroller">
  <span style="float:left;">Register now and start placing your order</span>
 </div>
</div>
<div id="hlogo">
<span style="float:right;margin:2px 2px 0 0;"><img src="img/relogo2.jpg"  class="logoImage" width="96" height="96"/></span>
</div>
<span style="font-size:small;text-shadow: 10px 10px 1px grey;"><h1>Reacheasy<span style="font-size:small;"><?php echo $_SESSION['username'];?></span></h1></span>
<ul id="nav">
    <li class="current"><a href="index.php">Home</a></li>
     <li><a href="women.php">Women</a></li>
     <li><a href="men.php">Men</a></li>
     <li><a href="children.php">Children</a></li>
     <li><a href="homeandappliances.php">Home&amp;Appliances</a></li>
     <li><a href="visionandsound.php">Vision&amp;Sounds</a></li>
      <!--<li><a href="motoring.php">Motoring</a></li>-->
      <li><a href="homemore.php">More</a></li>
      <li><a href="howto.php">Help(How to?)</a></li>
  </ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">

<?php
if($_SESSION['username'])
{ ?>
<ul id="navigationlb">
<li><a href='howto.php'>Help(How to?)</a></li>
<li><a href='notification.php'>Consignment notification</a></li>
<li><a href='youraccount.php'>Order Placement</a></li>
<li><a href='relogout.php'>Log out</a></li>
 </ul>
<?php }else{
?>
  <div>
<form action='relogin.php' method='post' class='rl'>
<fieldset>
<legend>Login</legend>
    <div>
    <label for='username' class='fixedwidth'>Username</label>
    <input type='text' name='username' id='username'/>
    </div>

    <div>
    <label for='password' class='fixedwidth'>Password</label>
    <input type='password' name='password' id='password'/>
    </div>
<div class='buttonarea'>
    <input type='submit' value='Log in'/>
    </div>
<p>
<a href='reregister.php'>Register </a>
</p>
</fieldset>
</form>
</div>
<?php
}
?

和我添加的javascript相关的CSS

/* Scroller Box */
#scroller_container {
 position: relative;
 width: 300px;
 height: 60px;
 overflow: hidden;
}

#scroller {
 white-space: nowrap;
 line-height: 60px;
 font-size: 60px;
}

#scroller p {
 padding: 0;
}
/* Scoller Box */

1 个答案:

答案 0 :(得分:0)

你可能会尝试这件事我发现:

<script type="text/javascript">

step=1
timerDown="" 

onload=function scrollDivDown(){
el=document.getElementById("scroll")
clearTimeout(timerDown) 
el.scrollTop+=step
timerDown=setTimeout("scrollDivDown()",10)

if(el.scrollTop>=el.scrollHeight-el.offsetHeight){
el.scrollTop=0
}

}

</script> 


<DIV id="scroll" style="width:250px; height:550px; overflow:hidden">


</DIV>

这很简单。替换

中的“滚动”
el=document.getElementById("scroll");

包含您要滚动的元素的ID。