Question

为了做到这一点，我编写了一个工作正常的脚本，但只有鼠标运动缓慢，每当它变得越来越快它变得越来越多，我可以在这个脚本中改进什么？任何推荐？

$(document).ready(function() {
    $.random = function() {return Math.floor(Math.random()*Math.pow(10,17))}

    $.fn.addOverlay = function() {
        $("<div class='overlay'></div>")
                .css({'position': 'absolute', 'background-color': '#9fc4e7', 'opacity': 0.3, 'top': $(this).offset().top, 'left': $(this).offset().left, 'width': $(this).width(), 'height': $(this).height()})
                .attr('overlayId',overlayId)
                .appendTo('body')
                .mouseleave(function(){
                    $(this).remove();
                    $('.overlay').each(function(){
                        if($(this).attr('overlayId')==overlayId) {
                            $(this).remove()
                        }
                    })
                });
        return this
    }

    $('div:not(.overlay),span,h1,h2,h3,h4,table,td,tr,p')
        .mouseenter(function(event){
            event.stopPropagation();
            overlayId = Math.random();
            $(this).addOverlay()
            .find('div,span,h1,h2,h3,h4,table,td,tr,p').each(function(){
                $(this).addOverlay(overlayId)
            })
        })

});

Answer 1

最后我找到了正确行事的方法，我把它放在这里为任何人降落;）（你可以在这个页面中注入脚本来试试; - ））

$(document).ready(function() {
        $.random = function() {return Math.floor(Math.random()*Math.pow(10,17))}
        $.z_index = 1;
        $.data_ = Array();

        $.fn.addOverlay = function(id) {
            $("<div class='overlay' id='"+id+"'></div>")
                    .css({'z-index': $.z_index, 'position': 'absolute', 'background-color': '#9fc4e7', 'opacity': 0.1, 'border': '2px solid black', 'top': $(this).offset().top, 'left': $(this).offset().left, 'width': $(this).outerWidth(), 'height': $(this).outerHeight()})
                    .appendTo('body');
            $.z_index = $.z_index+1;
            return this
        }

        $('div,span,h1,h2,h3,h4,table,td,tr,a,ul,li,ol,input,textarea,p,code,img').each(function(){
            rand = $.random();
            $(this).attr('DOMId',rand);
            $.data_.push(Array(
                rand,
                {'x': $(this).offset().left,                        'y': $(this).offset().top},
                {'x': $(this).offset().left+$(this).outerWidth(),   'y': $(this).offset().top},
                {'x': $(this).offset().left+$(this).outerWidth(),   'y': $(this).offset().top+$(this).outerHeight()},
                {'x': $(this).offset().left,                        'y': $(this).offset().top+$(this).outerHeight()},
                false
            ))
        });

        $(document).mousemove(function(e){
            for (i in $.data_) {
                x = e.pageX;
                y = e.pageY;
                if((x>$.data_[i][1].x) & (x<$.data_[i][2].x) & (y>$.data_[i][1].y) & (y<$.data_[i][3].y) & (!$.data_[i][5]))  {
                    $('[DOMId="'+$.data_[i][0]+'"]').addOverlay($.data_[i][0]);
                    $.data_[i][5] = true;
                } else if(((x<$.data_[i][1].x) | (x>$.data_[i][2].x) | (y<$.data_[i][1].y) | (y>$.data_[i][3].y)) & ($.data_[i][5])) {
                    $('#'+$.data_[i][0]).remove();
                    $.data_[i][5] = false;  
                }
            }
        })
});

Answer 2

你可以使用

$(element).hover(function(){
    //on mouse enter 
},function(){ 
    // on mouse leave
});

Answer 3

这看起来像是在使用chrome。我现在将在其他浏览器上进行测试。

$("body").append("<div id='test-overlay'></div>");
    $("#test-overlay")
                .css("opacity",0.5)
                .css("background","blue")
                .css("pointer-events","none")
                .css("position","absolute")
                .hide();

    $("h1,h2,h3,div,body,span,a,img,section,header,footer").hover(function(){
        $("#test-overlay")
            .css("left",$(this).offset().left)
            .css("top",$(this).offset().top)
            .width($(this).outerWidth())
            .height($(this).outerHeight())
            .show();
    },function(){

        $("#test-overlay")
            .hide();


    });

jQuery：使用mouseenter和mouseleave在悬停时显示覆盖元素

3 个答案: