JS--中奖广告浮动效果

      618要到了.要帮公司做一个简单的中奖号码的浮动.怎么玩了。其实只需要使用scrollHeight;scrollTop;offsetHeight这三个就可以实现了.

      代码如下:

<html>
    <meta charset='utf-8'>
    <body>
        <div id="demo" style="overflow:hidden;height:92px;width:232;border:1px,solid">
                <ul>
                    <li>第一行</li>
                    <li>第二行</li>
                    <li>第三行</li>
                    <li>第四行</li>
                    <li>第五行</li>
                    <li>第六行</li>
                    <li>第七行</li>
                    <li>第八行</li>
                    <li style='list-style-type:none'>&nbsp;</li>
                    <li style='list-style-type:none'>&nbsp;</li>
                    <li style='list-style-type:none'>&nbsp;</li>
                    <li style='list-style-type:none'>&nbsp;</li>
                </ul>
     <div id="demo2"></div>
    </div>
    </body> 

   <script>
            var demo = document.getElementById('demo');
            var roll = function(target){
                if(target.scrollTop < target.scrollHeight - target.offsetHeight){
                    target.scrollTop++;
                }else{
                    target.scrollTop = 0;
                }
            }

            setInterval('roll(demo)',30);

   </script>

</html>

             

posted on 2016-06-07 22:36  FrankZC  阅读(505)  评论(0)    收藏  举报