从一个文字滚动效果看DOM对象和JQUERY对象的区别

早些时候在CSDN上看到的的随每条消息不同高度滚动的效果，觉得蛮好。前些天自己研究了一下，一个小小效果，竟然也学到了很多东西。期间，一度迷惘的就是DOM对象和JQUERY对象，现写出来与大家分享。

先解释一下。为了实现对比，我做了三种效果，点击三个按钮分别呈现。前两种效果一样，不过分别是通过DOM对象和JQUERY对象进行操作的，这个效果是试验性的。第三个是对前面的效果进行优化，根据消息高度滚动，算是实用性强的了。

首先讲第一个，DOM对象。实现原理：首先拷贝当前滚动元素的内容，并附加至其后面，目的是为实现看起来的无缝滚动。核心内容应该是一个判断，当滚动元素全部滚动显示完毕后，迅速从头开始。悬停效果用clearInteval函数实现。另外要讲的主要是两个DOM参数：scrollTop和offsetHeight，前者表示滚过某一元素的高度（应该说是其子元素滚过它的高度），后者表示元素高度。还要再提一个常用参数offsetTop，表示其顶部距包含它的父元素顶部的距离。代码如下：

function dom(id){
 var container = document.getElementById(id); 
 var original = container.getElementsByTagName("ul")[0];
 var clone = container.getElementsByTagName("ul")[1];
 clone.innerHTML = original.innerHTML; 
 var rolling = function(){ 
 if(container.scrollTop == original.offsetHeight){ 
 container.scrollTop = 0; 
 }else{
 container.scrollTop++; 
 } 
 } 
 var timer = setInterval(rolling,speed);
 container.onmouseover = function(){clearInterval(timer)}; 
 container.onmouseout = function(){timer=setInterval(rolling,speed)}; 
}

接下来讲第二个效果，JQUERY。和前一个实现原理完全一致，唯一的不同是对象的获取和操作采用JQUERY方式进行。在使用到核心DOM参数scrollTop和offsetHeight时候，通过get(0)函数将JQUERY对象转换为DOM对象。另外，DOM对象转换为JQUERY对象时，只需用$符号将其包围起来即可。代码如下：

function jquery(id){
 var $container = $(id);
 var $original = $("ul:first");
 var $clone = $("ul:eq(1)");
 $clone.html($original.html());
 var rolling = function(){
 if($container.get(0).scrollTop == $original.get(0).offsetHeight){
 $container.get(0).scrollTop = 0;
 }else{
 $container.get(0).scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed);
 $container.mouseover(function(){clearInterval(timer)}); 
 $container.mouseout(function(){timer=setInterval(rolling,speed)});
}

最后讲第三个，实用的，JQUERY实现。滚动效果通过animate函数实现，悬停效果和上面的一样，依然是clearInteval函数实现。通过animate的marginTop值（负值）的不断减小模拟滚动。这里有一个全局参数now，通过setInterval控制它的增长，来实现调用每条消息。当所有消息滚动显示完毕后，将其重置为0（-1 + 1）。具体代码如下：

function marquee(id){
 var now = 0;
 var size = $("li").size();
 var scroll_height = 0;
 var $ul = $("ul:first");
 $("ul:eq(1)").html($ul.html());
 var rolling = function(){
 li_height = $("li:eq(" + now + ")").outerHeight();
 scroll_height += li_height;
 if(now < size){
 $ul.animate({marginTop:(0 - scroll_height)},li_height/100 * 1000);
 }else{
 now = -1;
 scroll_height = 0;
 $ul.animate({marginTop:0},0);
 }
 now += 1;
 }
 var timer = setInterval(rolling,3000);
 $(id).mouseover(function(){clearInterval(timer)}); 
 $(id).mouseout(function(){timer=setInterval(rolling,3000)});
}