jquery里鼠标移动显示图片当前坐标的位置？
<script>$(document).ready(function(){$("#img").mouseover(function(e){varwidthh=e.orig...
<script>
$(document).ready(function(){
$("#img").mouseover(function(e){
var widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
var tooltip = "<div id='tooltip'>图片的宽度：" + widthh +"<br>图片的高度："+heightt+ "</div>";
$('#container').append(tooltip);
}).mouseout(function(){
$("#tooltip").remove();
this.title = this.myTitle;
})
});
</script>
以上是可以显示一次图片坐标的正确代码，但是我想是鼠标移动到图片哪里，就能马上显示，jquery怎么弄呢？ 展开
$(document).ready(function(){
$("#img").mouseover(function(e){
var widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
var tooltip = "<div id='tooltip'>图片的宽度：" + widthh +"<br>图片的高度："+heightt+ "</div>";
$('#container').append(tooltip);
}).mouseout(function(){
$("#tooltip").remove();
this.title = this.myTitle;
})
});
</script>
以上是可以显示一次图片坐标的正确代码，但是我想是鼠标移动到图片哪里，就能马上显示，jquery怎么弄呢？ 展开
3个回答
展开全部
给你改了一下 试试呗 用 e.pageX e.pageY 也行吧 省的那么麻烦
$(document).ready(function(){
$("#img").mousemove(function(e){
var widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
$('#container').text("图片的宽度：" + widthh +"<br>图片的高度："+heightt);
}).mouseout(function(){
$("#tooltip").remove();
this.title = this.myTitle;
})
});
</script>
</head>
<body>
<img id="img" width="200" height="200" src="images/star.png"></img>
<div id="container" style="width: 400px; height: 200px; background-color: green;">
</div>
</body>
$(document).ready(function(){
$("#img").mousemove(function(e){
var widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
$('#container').text("图片的宽度：" + widthh +"<br>图片的高度："+heightt);
}).mouseout(function(){
$("#tooltip").remove();
this.title = this.myTitle;
})
});
</script>
</head>
<body>
<img id="img" width="200" height="200" src="images/star.png"></img>
<div id="container" style="width: 400px; height: 200px; background-color: green;">
</div>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你改了一下
试试呗
用
e.pageX
e.pageY
也行吧
省的那么麻烦
$(document).ready(function(){
$("#img").mousemove(function(e){
var
widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var
heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
$('#container').text("图片的宽度："
+
widthh
+"<br>图片的高度："+heightt);
}).mouseout(function(){
$("#tooltip").remove();
this.title
=
this.myTitle;
})
});
</script>
</head>
<body>
<img
id="img"
width="200"
height="200"
src="images/star.png"></img>
<div
id="container"
style="width:
400px;
height:
200px;
background-color:
green;">
</div>
</body>
试试呗
用
e.pageX
e.pageY
也行吧
省的那么麻烦
$(document).ready(function(){
$("#img").mousemove(function(e){
var
widthh=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//
var
heightt=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//
$('#container').text("图片的宽度："
+
widthh
+"<br>图片的高度："+heightt);
}).mouseout(function(){
$("#tooltip").remove();
this.title
=
this.myTitle;
})
});
</script>
</head>
<body>
<img
id="img"
width="200"
height="200"
src="images/star.png"></img>
<div
id="container"
style="width:
400px;
height:
200px;
background-color:
green;">
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
mousemove？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
