jQuery: отображение наложения на элементы при наведении курсора с помощью mouseenter и mouseleave - PullRequest
Новая
       10

jQuery: отображение наложения на элементы при наведении курсора с помощью mouseenter и mouseleave

0 голосов
/ 18 марта 2012

Для этого я написал скрипт, который отлично работает, но только для медленных движений мыши, когда он идет быстро, он глючит, что я могу улучшить в этом скрипте?Любая рекомендация? 

$(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)
            })
        })

});

Ответы [ 3 ]

3 голосов
/ 19 марта 2012

Наконец-то я нашел способ сделать это правильно, я поставил его здесь для всех, кто приземлится здесь;) (вы можете добавить скрипт на этой странице, чтобы попробовать его; -)) 

$(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;  
                }
            }
        })
});
1 голос
/ 18 марта 2012

Это похоже на работу над хромом.Сейчас я протестирую в других браузерах. 

$("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();


    });
1 голос
/ 18 марта 2012

вы можете использовать 

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