jquery对象和dom原生获取的对象是不同的。
写了一个点击无缝滚动的demo,但是点击的时候如果上一个不运动完成,在快速点击就会快闪。
可是开始也清除定时器了,后来发现是传入的jq对象,jqobj.timer=定时器,这里jqobj没法添加.timer,所以每次清空也是徒劳,根本就没有添加上这个对象的属性。
用document,getElementById(‘obj’)获取的原生dom对象,就是可以添加上.timer属性,所以清除定时器也是成功的。
重点是最后
// ******************
// document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象
// ******************
rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.box{width: 1200px;margin: 100px auto;} .gundong{width: 660px;border: 1px solid ;padding: 10px 80px 0px;position: relative;}
.span3{position: absolute;top: 50%;left: 0;width: 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
.span4{position: absolute;top: 50%;right: 0;width: 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
.gunul_wrap{width: 660px;overflow-x: hidden;position: relative;height: 125px;}
.gunul{width: 660px;margin: 0 auto;position: absolute;left: 0;top: 0;}
.gunul:after{display: block;content: "";clear: both;}
.gunul li{float: left;margin:0px 10px;}
.gundong img{width: 200px;}
.gundong a{text-decoration: none;color: #333;}
.gundong p{width: 200px;line-height: 40px;text-align: center;}
</style>
<script type="text/javascript" src="js/jquery-1.10.2_d88366fd.js" ></script>
</head>
<body>
<div class="box"> <!--无缝滚动-->
<div class="gundong">
<span class="span3">next</span>
<span class="span4">pre</span>
<div class="gunul_wrap">
<ul class="gunul" id="ul22">
<li>
<a href=""><img src="data:images/gjlb2.jpg" alt="" /><p>1</p></a>
</li>
<li>
<a href=""><img src="data:images/gjlb3.jpg" alt="" /><p>2</p></a>
</li>
<li>
<a href=""><img src="data:images/gjlb5.jpg" alt="" /><p>3</p></a>
</li>
</ul>
</div>
</div> </div>
</body>
</html>
<script> $(function(){
rtjr.app.wufeng();
}); var rtjr={}; rtjr.tools={};
rtjr.ui={};
rtjr.app={};
// 无缝滚动
rtjr.tools.getul=function(obj){
var cont=obj.html();
cont+=cont;
obj.html(cont);
var objwidth=$(obj.find('li')[0]).outerWidth(true)*obj.find('li').length;
obj.css({'width':objwidth})
};
rtjr.ui.move=function(obj,old,newd){
console.log(obj.timer);
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var ispeed=(newd-old)/10;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
if(newd==old){
clearInterval(obj.timer);
}else{
old+=ispeed;
$(obj).css({'left':old});
}
},30);
}; rtjr.app.wufeng=function(){
var icont=0;
rtjr.tools.getul($('.gunul'));
var liwidth=$($('.gunul li')[0]).outerWidth(true); $('.span3').bind('click',function(){
if(icont==($('.gunul li').length)/2){
icont=0;
$('.gunul').css('left',0);
};
rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont+1)*liwidth);
icont++;
}); $('.span4').bind('click',function(){
if(icont==0){
icont=$('.gunul li').length/2;
$('.gunul').css('left',-$('.gunul').outerWidth()/2);
};
// ******************
// document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象
// ******************
rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth);
icont--;
});
};
</script>
jquery对象和dom原生获取的对象是不同的。的更多相关文章
- 什么是jquery $ jQuery对象和DOM对象 和一些选择器
1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- jquery对象和DOM对象的区别和转换
jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- jQuery对象与DOM对象之间的转换方法
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- jquery对象和dom对象的相互转换
更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...
随机推荐
- LaTeX学习资源
LaTeX入门 Beamer教程文档 数学公式大全
- denied: requested access to the resource is denied 解决办法
往 dockerhub 上 push 本地镜像的时候 出现了下面这个提示: denied: requested access to the resource is denied 解决办法: 在 dod ...
- 分别用shell编程和c编程实现文件和目录的复制
c编程参考:https://blog.csdn.net/maizi_hsx/article/details/78645698 makefile文件: copy:cp.o gcc cp.o -o cop ...
- 【译】高级T-SQL进阶系列 (四)【上篇】:使用游标进行行级别处理
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 正常来说,使用游标并不是处理记录集的最佳方式.然而当一个经验丰富的程序员第一次开始写TSQL时,他们经常会寻找其 ...
- java并发基础知识
这几天全国都是关键时候,放假了,还是要学习啊!很久没有写博客了,最近看了一本书,有关于java并发编程的,书名叫做“java并发编程之美”,讲的很有意思,这里就做一个笔记吧! 有需要openjdk8源 ...
- 深入细枝末节,Python的字体反爬虫到底怎么一回事
内容选自 即将出版 的<Python3 反爬虫原理与绕过实战>,本次公开书稿范围为第 6 章——文本混淆反爬虫.本篇为第 6 章中的第 4 小节,其余小节将 逐步放送 . 字体反爬虫开篇概 ...
- C#中equals和==的区别有哪些
本文导读:C# 中==是用来判断变量的值是否相等,相等返回true,不相等返回false.Equals是用来判断两个对象(除string类型外)是否相等,相等的 条件是:值,地址,引用全相等,因为St ...
- 关于High CPU及基本排查
在实际的网络中,总会存在设备出现high CPU的情况,这种情况下,往往会让网络管理员比较着急,因为如果CPU持续high,可能导致设备的性能降低,严重还可能导致设备down掉. 本篇记录,主要记录一 ...
- ElasticSearch应用
1.什么是ElasticSearch Elaticsearch,简称为es, es是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本 身扩展性很好,可以扩展到上百台服务器,处理 ...
- spark wordcount程序
spark wordcount程序 IllegalAccessError错误 这个错误是权限错误,错误的引用方法,比如方法中调用private,protect方法. 当然大家知道wordcount业务 ...