从一个文字滚动效果看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)});
}

dom对象和jquery对象的区别

在开发前台页面的时候,如果要想把页面做的交互性高一些,需要写大量的js代码和css样式.        在js中,获取对象,可以通过 document.getElementById 或 docum...
  • zc474235918
  • zc474235918
  • 2015年12月20日 08:14
  • 1318

jQuery对象与DOM对象的区别

jQuery对象与DOM对象 1:对于才开始接触jQuery库的初学者,我们需要清楚认识一点: jQuery对象与DOM对象是不一样的 2:可能一时半会分不清楚哪些是jQuery对象,哪些是...
  • qq_18832439
  • qq_18832439
  • 2016年04月23日 20:18
  • 666

如何判断jQuery对象与dom对象

判断JQUERY对象 当我们在用jquery的each做循环遍历的时候常常会使用到this,而有时候我们不知道this所指的到底是什么,因为要使用jquery的方法 前提此对象必须是jq...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2015年11月15日 18:52
  • 4085

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言     在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常“犯迷糊”,需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到。为了让自...
  • xukai871105
  • xukai871105
  • 2014年06月25日 22:06
  • 4856

用#id取得的jQuery对象与document.getElementByIdid所得到的DOM对象区别

转载于: 贤心博客 用#id作为选择符取得的是jQuery对象而并非是document.getElementById(’id’)所得到的DOM对象,两者并不等价。 var $cr=$('#...
  • a1943206465
  • a1943206465
  • 2017年02月06日 15:02
  • 2484

js中的this和jquery click传入dom对象

函数中的 this 指的是函数作为哪个对象的方法被调用,this 就是那个对象。当函数作为构造函数通过 new 来使用时,this 指当下新建的对象。通过 addEventListener 注册的事件...
  • hanghangde
  • hanghangde
  • 2017年02月07日 15:13
  • 1420

JS对象、DOM对象、Jqeury对象、Json对象 对比分析

一直以来都搞不清这几个对象到底什么关系,通过资料查阅,自己的理解如下:  JS对象:javascript对象,在js代码里面定义的对象(对象有属性和方法)。  DOM对象:其实就是定义好了...
  • Shb_derek
  • Shb_derek
  • 2014年07月16日 17:09
  • 1844

DOM对象与query对象说明及相互转换

DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; var domObj = document.getElementByI...
  • zhongbeida_xue
  • zhongbeida_xue
  • 2016年07月14日 15:21
  • 522

BOM和DOM详解

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道...
  • anythings
  • anythings
  • 2016年04月25日 09:54
  • 4627

JavaScript之DOM对象与BOM对象的关系

BOM对象 JavaScript向程序员提供了一种操作Web浏览器的手段,例如,Javascript语言可以用来调整Web浏览器窗口的高度,宽度和屏显位置等属性。(引用自JavaScript+DOM编...
  • fengbird
  • fengbird
  • 2017年03月29日 17:04
  • 917
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从一个文字滚动效果看DOM对象和JQUERY对象的区别
举报原因:
原因补充:

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