zoukankan      html  css  js  c++  java
  • 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{ 1200px;margin: 100px auto;}
                
                .gundong{ 660px;border: 1px solid ;padding: 10px 80px 0px;position: relative;}
                .span3{position: absolute;top: 50%;left: 0; 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
                .span4{position: absolute;top: 50%;right: 0; 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
                .gunul_wrap{ 660px;overflow-x: hidden;position: relative;height: 125px;}
                .gunul{ 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{ 200px;}
                .gundong a{text-decoration: none;color: #333;}
                .gundong p{ 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="images/gjlb2.jpg" alt="" /><p>1</p></a>
                            </li>
                            <li>
                                <a href=""><img src="images/gjlb3.jpg" alt="" /><p>2</p></a>
                            </li>
                            <li>
                                <a href=""><img src="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>
  • 相关阅读:
    windows下安装redis
    十五oracle 触发器
    Flask 学习 六 大型程序结构
    Flask 学习 五 电子邮件
    Flask 学习 四 数据库
    Flask学习 三 web表单
    Flask学习 二 模板
    Flask学习 一 基本结构
    Python操作Redis
    Python操作MySQL
  • 原文地址:https://www.cnblogs.com/gaidalou/p/7357648.html
Copyright © 2011-2022 走看看