html代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="/Jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/Jquery/js22.js"></script>
<style type="text/css">
#outer{
  height:200px;
  width:150px;
  text-align:center;
  border:1px solid #003;
  margin:100px auto;
  overflow:hidden; cursor:pointer;}
</style>
</head><body>
<div id="outer">
<div id="in">
start<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
end
</div>
</div>
</body> js代码如下
  $(function(){
 var clone=$("#in").clone();
 $("#outer").append(clone);
 var speed=1; function scroll2(){
  var scrollTop=$("#outer").scrollTop()+speed;
  if(scrollTop==200){
   scrollTop=0;
   }
  $("#outer").scrollTop(scrollTop);
  }
 var NY=setInterval(scroll2,100); $("#outer").mouseover(function(){ clearInterval(NY);});
 $("#outer").mouseout(function(){NY=setInterval(scroll2,100); }); })
希望各位大侠指点一下,不胜感激!
jquery 竖直文本滚动JavaScriptHTML

解决方案 »

  1.   

    <script type="text/javascript">
     $(function(){
      
      var clone=$("#in").html();//这里要用html而不能用clone,html()方法是获取html代码,你是要加长html代码,clone方法是要复制节点信息  $("#outer").append(clone).append(clone);//其次,你滚动的内容长度要大于200+scrollTop的高度才能进行滚动
     var speed=1;
      var NY=window.setInterval(scroll2,100);  function scroll2()
      {
      var scrollTop=$("#outer").scrollTop()+speed;
      if(scrollTop==200){
       scrollTop=0;
       }
      $("#outer").scrollTop(scrollTop);
      }
      
     $("#outer").hover(function(){clearInterval(NY)},function(){NY=setInterval(scroll2,100);}); })</script>