[英]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.