• mouseenter和mouseout中间的时间控制


    为了防止鼠标快速滑过div而加的时间限制:

    在看延迟绑定时候看到,这也算是延迟绑定了?:(20130909)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset=utf-8>
    <title></title>
    
    </head>
    <body>
     
    <div id="test" style="border: 1px solid #CCC;  100px; height: 100px; background: #666;">这是一个测试DIV
    把鼠标放在上面2秒后会弹出他的ID</div> 
    <script type="text/javascript">
    // <![CDATA[ 
    var delay=function(t,fn){ 
        var i=0, 
        j=10, 
        t=(t*1000)/j, 
        //把延迟时间平均分成10等份 
        _this=this, 
        //解决this绑定问题,所以调用delay函数的时候,请处理好this指向本身对象 
        d=setInterval(function(){ 
            i++; 
            if(i==j){ 
                clearInterval(d); 
                fn.apply(_this); 
            }; 
        },t); 
    
        _this.onmouseout=function(){ 
            clearInterval(d); 
        }; 
    
        } 
        document.getElementById("test").onmouseover=function(){ 
            delay.apply(this,[2,function(){
                alert(this.id)
            }]); 
        //使用apply改变this指针 
        }; 
    // ]]>
    </script> 
    
    </body>
    </html>
     
    (感觉在enter中应该要加一个clear,但是测试下来,感觉不加,也不会set更多的time 20130805)
    $(".a").each(function(i) {
            $(this).mouseenter(function(){
                t=setTimeout("$('.div').eq("+i+").fadeIn()",500)
            }).mouseleave(function(){
                clearTimeout(t)
                $(".div").eq(i).fadeOut();
            })
        
        });

    不知道当时为啥会想得那么复杂 :
    $(".list").mouseenter(function() {
            if( $(this).data("time") ){
                clearInterval( $(this).data("time") );
            }
            var _this = $(this);
            $(this).data("time", setInterval(function(){
                _this.children(".cover").animate({top: '0px'});
                clearInterval( _this.data("time") );
                _this.removeData("time");
            },300));
        }).mouseleave(function() {
            if( $(this).data("time") ){
                clearInterval( $(this).data("time") );
                $(this).removeData("time");
            }
            $(this).children(".cover").animate({top: '145px'});
        })


    --------------------------------------------------------------------------setTimeout加参数20130805
    var _sto = setTimeout;
    window.setTimeout = function(callback,timeout,param)
    {
        var args = Array.prototype.slice.call(arguments,2);
        var _cb = function()
        {
            callback.apply(null,args);
        }
        _sto(_cb,timeout);
    }

    --------------------------------------------------------------------------setTimeout加参数20130805
    html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset=utf-8>
    <title>And the winner isn't...</title>
    <style type="text/css">
    a{width:100px; height:100px; background:#0FF; display: block; position:absolute}
    .div{ width:100px; height:100px; background:#f36; display:none; position:absolute}
    .warp{width:100px; height:100px; float:left; position:relative; margin:20px}
    </style>
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".warp").each(function(i) {
            $(this).mouseenter(function(){
                t=setTimeout("$('.div').eq("+i+").fadeIn()",500)
            }).mouseleave(function(){
                clearTimeout(t)
                $(".div").eq(i).fadeOut();
            })
       
        });
    })
    </script>
    </head>
    <body>
    <div class="warp" style=" ">
        <a href="#"></a>
        <div class="div"></div>
    </div>
    <div class="warp">
        <a href="#"></a>
        <div class="div" style=""></div>
    </div>
    <div class="warp">
        <a href="#"></a>
        <div class="div" style=""></div>
    </div>
    
    
    
    </body>
    </html>
     
  • 相关阅读:
    UVa 11991 Easy Problem from Rujia Liu?
    UVa 11995 I Can Guess the Data Structure!
    LA 3485 (积分 辛普森自适应法) Bridge
    LA 5009 (三分法求极值) Error Curves
    软帝学院:一万字的Java基础知识总结大全(实用)
    学java可以做些什么
    从零开始学习java一般需要多长时间?
    学习java需要英语很好吗?
    java的8种基本数据类型
    什么是java变量,java变量是什么
  • 原文地址:https://www.cnblogs.com/della/p/3297787.html
Copyright © 2020-2023  润新知