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

原创 2014年03月29日 22:05:04

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

先拿出来效果:http://www.i5wl.com/example/scroll/

先解释一下。为了实现对比,我做了三种效果,点击三个按钮分别呈现。前两种效果一样,不过分别是通过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)});
}

相关文章推荐

jQuery对象与DOM对象区别和关联

1,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方...

JQuery对象和DOM对象的区别

初学jQuery,会对jQuery对象和DOM对象心存很大的疑惑,因此有必要明白他们之间的区别和联系。 DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQue...

jQuery对象与DOM对象的区别

jQuery对象与DOM对象 1:对于才开始接触jQuery库的初学者,我们需要清楚认识一点: jQuery对象与DOM对象是不一样的 2:可能一时半会分不清楚哪些是jQuery对象,哪些是...

总结一下项目中常用的正则validate及键盘的一些事件

$(function(){ // 匹配姓名 全英文带空格或者全中文不能英文中文混合 /^([a-zA-Z ]+|[\u4e00-\u9fa5]+)$/ // 只能输入[0-9]...

设置logo和背景以及语言包切换

因为项目是一个海外项目,所以涉及到一些语言的问题,中文简体已经无法满足客户的小宇宙了,当老大轻松地把js这部分语言切换问题交给我的时候,感觉整个人都不好了。还有设置logo和背景的问题,乍一听感觉高大...

jQuery对象和DOM对象的区别与联系

一、什么是DOM对象 所谓DOM,即Document Object Model(文档对象模型),每一个DOM都可以表示成一棵树,请看下面的代码,这是一个简单的网页基本结构。 1 doct...

DOM对象和JQuery对象的区别

DOM对象和JQuery对象的区别 [转载]http://www.cnblogs.com/yellowapplemylove/archive/2011/04/19/2021583.html ...

DOM对象和JQuery对象的区别

转自:http://www.cnblogs.com/yellowapplemylove/archive/2011/04/19/2021583.html jQuery对象和DOM对象使...

js原生DOM对象与jQuery对象不是一回事儿,区别联系相互转换,踩坑经历

写在前面: 本文主要内容包括js原生dom对象和jQuery对象的区别,联系,相互转换,以及踩坑经历。情况是这样的,今天在实现一个js验证码的功能,需要获取input的值,然后我用jQuery的...
  • OBKoro1
  • OBKoro1
  • 2017年04月13日 13:53
  • 416

DOM对象和JQuery对象的区别与互相转换

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从一个文字滚动效果看DOM对象和JQUERY对象的区别
举报原因:
原因补充:

(最多只允许输入30个字)