jquery鼠标移动图片产生放大覆盖住原来的图片

Question

$(function(){
var x = 10;
var y = 20;
$(".hov").mouseover(function(e){
this.myTitle = this.parentNode.title;
this.title = "";
var imgTitle = this.myTitle? "<br/><div style='width:215px;z-index:1000'>" + this.myTitle : "</div>";
var tooltip = "<div id='tip'><img width='215px' height='215px' src='"+ this.src +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中  
$("#tip")
.css({
"top": (e.pageY+y) + "px",
"left":  (e.pageX+x)  + "px"
}).show("1000");   //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
this.parentNode.title = this.myTitle;
$("#tip").remove();  //移除 
    }).mousemove(function(e){
$("#tip")
.css({
"top": (e.pageY+y) + "px",
"left":(e.pageX+x)  + "px"
});
});
});这个是根据鼠标移动显示放大效果。
我现在是想直接把215px大小的图片覆盖住原来160px的图片上面。

Answer 1

215px大小的图片的div是否成功追加到了body中 ？
设置z-index就能盖住 。

Answer 2

获得原来图片位置 。
设置215大小div left ,top 。//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
 
看看能行不 。

Answer 3

我这样写 没有效果
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
$(function(){
var x = 10;
var y = 20;
$(".hovvv").mouseover(function(e){
this.myTitle = this.parentNode.title;
this.title = "";
var imgTitle = this.myTitle? "<br/><div style='width:215px;z-index:1000'>" + this.myTitle : "</div>";
var tooltip = "<div id='tip'><img style='width:215px;height:215px;z-index:1000' src='"+ this.src +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
var topx=$(this).getTop(e);
var leftx=$(this).getLeft(e);  
$("#tip")
.css({
"top": topx+"px",
"left":  leftx+"px"
}).show("1000");   //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
this.parentNode.title = this.myTitle;
$("#tip").remove();  //移除 
    }).mousemove(function(e){
$("#tip")
.css({
"top": topx+"px",
"left":topx+"px"
});
});
}); 不知道 是哪个地方错了 。 

Answer 4

$("#tip").css("position","absolute").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("1000"); 这样就行了 下面也是一样