簡體   English   中英

onmouseover和jquery函數無法正常工作

[英]onmouseover and jquery function not working correctly

"<a " . $thumbs . " href=\"" . $url . "\" class=\"download\" rel=\"files/" . $dir . "/" . $file . "\" title=\"" . $alt . "\"   ".$hover." > </a>"

當鼠標懸停在該鏈接上時,將調用一個函數:

$hover = " onmouseover=\"showImageThumbnail(this, '".$url_thumb."')\"";

函數本身:

function showImageThumbnail(obj, url){          
    xOffset = 30;
    yOffset = 10;

    $.get(url, function(data) {
        $(obj).hover(function(e){

            $("body").append("<p id='screenshot'><img src='data:image/jpg;base64,"+ data +"' alt='Atsisiųsti' /></p>");                              
            $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
        },
        function(){ 
            $("#screenshot").remove();
        }); 
        $(obj).mousemove(function(e){
            $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
        });
    });
}

我的問題是我的功能無法正常工作,我需要將鼠標懸停兩次才能使其正常工作。 此功能就像工具提示一樣,它顯示圖像縮略圖。 我認為,我需要刪除.hover. 方法,但此后我的功能根本不起作用或部分不起作用(例如,當光標離開鏈接時縮略圖不會被刪除)。 有人可以幫我修復該功能嗎?

嘗試進行以下更改

"<a " . $thumbs . " href=\"" . $url . "\" class=\"download\" rel=\"files/" . $dir . "/" . $file . "\" title=\"" . $alt . "\"   image=\"".$url_thumb."\" > </a>"

$(function() {
    var screenshot = $("<p id='screenshot'><img src='data:image/jpg;base64,"
            + data + "' alt='Atsisiusti' /></p>").hide()
            .appendTo('body');
    var img = $('img', screenshot);

    $('.download[image]').hover(function(e) {
            $.get($(this).attr('image'), function(data) {
                img.attr('src', 'data:image/jpg;base64,'
                                + data);
            });

            img.removeAttr('src');

            screenshot.css({
                'top' : (e.pageY - xOffset) + 'px',
                'left' : (e.pageX + yOffset) + 'px'
            }).fadeIn("fast");
        }, function() {
            screenshot.hide();
    }).mousemove(function(e) {
            screenshot.css({
                'top' : (e.pageY - xOffset) + 'px',
                'left' : (e.pageX + yOffset) + 'px'
            })
    });

})

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM