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

js实现touch移动触屏滑动事件

在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象)。这个对象封装一次屏幕触摸,一般来自于手指。...
  • hewu1122
  • hewu1122
  • 2016-02-01 09:46:59
  • 7863

dom对象和jquery对象的区别

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

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

1,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方...
  • Practicer2015
  • Practicer2015
  • 2015-04-11 10:52:16
  • 2086

jQuery对象与DOM对象区别及互换

初学jQuery,感觉jQuery对象和DOM对象的区分,对于以后的学习还是很重要的,把自己的体会给大家分享一下,欢迎喷!DOM称为文档对象模型,是W3C制定的一套标准,是把构成html页面元素(如h...
  • Minhellic
  • Minhellic
  • 2016-07-17 21:41:12
  • 651

Dom对象,js对象和jquery对象的区别

一、DOM对象文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示...
  • kuangdacaikuang
  • kuangdacaikuang
  • 2017-05-16 09:37:12
  • 953

DOM对象与jquery对象有什么不同?

转自:http://zhidao.baidu.com/link?url=2Iq0Y-gMe2Z82cmXVR4IJgCDvVO2gpfHga67PLEbx9hAEuibnt57ivxCYWHAQUUO...
  • suyu_yuan
  • suyu_yuan
  • 2016-09-09 14:31:19
  • 435

JQuery对象与DOM对象相互转换以及JS和JQyery获取<select>元素当前值的方法

JQuery Object and DOM Object option1 option2 option3 JQuery对象和DOM对象不能混肴,J...
  • haiyoung
  • haiyoung
  • 2017-05-29 18:23:16
  • 998

JavaScript DOM对象和JQuery对象相互转换

1、分析源码 JavaScript DOM对象和JQuery对象相互转换 /** * JavaScript DOM对象转换成JQuery对象 */ ...
  • you23hai45
  • you23hai45
  • 2015-03-12 23:37:31
  • 1529

jQuery对象和DOM对象之间的相互转换

先是DOM对象转换为jQuery对象: 首先需要引入jQuery函数库 //获取DOM对象 var username=document.getElementById("use...
  • u012110719
  • u012110719
  • 2015-09-16 11:35:46
  • 3362

关于jQuery对象和DOM对象的区别

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

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