2012-11-26 81 views
0

我正在使用jticker.js打印我的數據。jticker.js在移動設備上並自動滾屏

在大屏幕上一切正常,但在小型手機屏幕上,我希望滾動可以繼續打印數據,問題是在移動設備的高度填滿後沒有滾動。

如何將自動滾動添加到我的代碼中,該代碼將知道滾動數據?

這裏是我的代碼演示:

http://jsfiddle.net/e8c8G/

這裏是我的代碼:

<title>jticker | Demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style type="text/css" media="screen, projection"> 

     #ticker 
     {height: auto; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;} 
     #ticker .cursor 
     {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;} 
     #ticker p 
     {margin-bottom: 0.8em;} 
     #ticker code 
     {margin: 0.4em 0.4em; display: block;} 
     #ticker .next 
     {position: absolute; bottom: 1em;} 
    </style> 
    <script type="text/javascript" src="./jticker3 Demo_files/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="./jticker3 Demo_files/jquery.jticker.js"></script> 
    <script type="text/javascript"> 

     jQuery(document).ready(function(){ 
     // Instantiate jTicker 
     jQuery("#ticker").ticker({ 
      cursorList: " ", 
      rate:  10, 
      delay:  4000 
     }).trigger("play").trigger("stop"); 

     // Trigger events 
     jQuery(".stop").click(function(){ 
      jQuery("#ticker").trigger("stop"); 
      return false; 
     }); 

     jQuery(".play").click(function(){ 
      jQuery("#ticker").trigger("play"); 
      return false; 
     }); 




     jQuery(".style").click(function(){ 
      jQuery("#ticker") 
      .trigger({ 
       type: "control", 
       cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"}) 
      }) 
      return false; 
     }); 

     }); 


    </script> 

    </head> 

    <body cz-shortcut-listen="true"> 

    <div id="content"> 

     <h2 style="text-align:center;">Demo</h2> 
     <div id="ticker"> 
     <div> 
      <h3>Cart:</h3> 
      <ul style="margin-bottom:40px;"> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li> 
        <li>Price : 100 euro</li>   
      </ul> 

        <a class="next" href="http://www.thepixelart.com/demo/jticker/#" >Total: 109$</a> 
     </div> 
     </div> 



    </div> 

回答

0

好吧,我找到了答案:

我只是說這個我代碼:

 $('html, body').animate({ 
     scrollTop: $(document).height() 
     }, 
     4000); 

這裏是完整的代碼工作,你可以檢查它在移動設備或小屏幕在行動中看到自動滾屏:

http://jsfiddle.net/e8c8G/

相關問題