鼠标拖拽,给图片打点,显示坐标

最新推荐文章于 2024-03-19 22:36:10 发布

weixin_30376083

最新推荐文章于 2024-03-19 22:36:10 发布

阅读量374

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：http://www.cnblogs.com/duanyue/p/7065095.html

版权

核心代码:

function move(){
var x,y;
$('.point').mousedown(function (){
var _num = $(this).text();
$(this).css('z-index','10');
var _w=parseInt($(this).css("width"))/2;
var _h=parseInt($(this).css("height"))/2;
var marginTop = $('.img-box').offset().top;
var marginLeft = $('.img-box').offset().left;
$('.point-list .num'+_num+'').addClass('active').siblings().removeClass('active');
$(this).mousemove(function (event){
var ox=event.clientX-marginLeft;
var oy=event.clientY-marginTop;
var t=oy-_h;
var l=ox-_w;
var w=$('.img-box').width()-$('.point').width();
var h=$('.img-box').height()-$('.point').height();
if(t<0){
t=0;
 }
else if(t>h){
t=h;
 }
if(l<0){
l=0;
 }
else if(l>w){
l=w;
 }
x=parseInt(l+parseInt($(this).css('width'))/2);
y=parseInt(t+parseInt($(this).css('height')));
$(this).css({top:t,left:l});

$('.point-list .num'+_num+' .x-num').html(x);
$('.point-list .num'+_num+' .y-num').html(y);
 })
 });
$('.point').mouseup(function (){
$(this).unbind("mousemove");
$(this).css('z-index','1');
 });
}