jQuery无缝向上滚动效果

该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果，废话不多说，直接上代码

（1）向上滚动

HTML：

 <div id="demo" style="height:110px;overflow:hidden;">
        <div id="demo1">
            <ul class="prizelist">
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
                <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li>
            </ul>
        </div>
        <div id="demo2">
            <ul class="prizelist">
            </ul>
        </div>
    </div>

js代码:

  function beginroll() {
        var speed = 40
        window.onload = function() {
            var demo = document.getElementById("demo");
            var demo2 = document.getElementById("demo2");
            var demo1 = document.getElementById("demo1");
            if(demo1.offsetHeight < 110){
                $("#demo2").hide();
            demo2.innerHTML = demo1.innerHTML 
            }
            function Marquee() {
                if (demo.scrollTop >= demo1.offsetHeight) {
                    demo.scrollTop = 0;
                } else {
                    demo.scrollTop = demo.scrollTop + 1;
                }
            }
            var MyMar = setInterval(Marquee, speed)
            demo.onmouseover = function() {
                clearInterval(MyMar)
            }
            demo.onmouseout = function() {
                MyMar = setInterval(Marquee, speed)
            }
        }
    }
        beginroll();

jQuery代码：

 $(document).ready(function(){
            function beginroll(){
            var speed = 40
            var demoScrollTop = $("#demo").scrollTop();
            var demo1OffsetHeight = $("#demo1").height();
                var demohtml= $("#demo1").html();
            $("#demo2").html(demohtml);
            function Marquee() {
                 if (demoScrollTop >= demo1OffsetHeight) {
                    demoScrollTop = 0;
                } else {
                   demoScrollTop = demoScrollTop + 1;  
                }
                $("#demo").scrollTop(demoScrollTop);
            }
            var MyMar = setInterval(Marquee, speed);
            $("#demo").mouseover(function(){
                clearInterval(MyMar);
            })
            $("#demo").mouseout(function(){
                MyMar = setInterval(Marquee, speed);
            })
             
            }
            beginroll();
        })

（2）向左滚动

HTML：

<div id="demoLeft" style="overflow:hidden;width:80%;margin-left:10%;text-align:center;">
	<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
    <td id="marquePic1">
	<table width='100%' border='0' cellspacing='0'>
	<tr>
        <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	    <td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
	</tr>
        </table>
		</td><td id="marquePic2" ></td>
        </tr>
	</table>
    </div>

JS代码：

 var speed=50;
        var demoLeft = document.getElementById("demoLeft");
        var marquePic2 = document.getElementById("marquePic2");
        var marquePic1 = document.getElementById("marquePic1");
  marquePic2.innerHTML=marquePic1.innerHTML 
function Marquee(){ 
if(demoLeft.scrollLeft>=marquePic1.scrollWidth){ 
demoLeft.scrollLeft=0 
}else{ 
demoLeft.scrollLeft++ 
} 
} 
var MyMar1=setInterval(Marquee,speed) 
demoLeft.οnmοuseοver=function() {clearInterval(MyMar1)} 
demoLeft.οnmοuseοut=function() {MyMar1=setInterval(Marquee,speed)}

总的来说，这个效果运用的是dom元素的scrollTop与offsetHeight两者之间的联系，运用定时器的操作循环操作从而实现滚动的效果