`
qepipnu
  • 浏览: 74595 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

获取鼠标在图片对象上的位置

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    function getMousePosition(e){
        var x = 0, y = 0;
        var e = e || window.event;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }
        return { 'x': x, 'y': y };
    }

    $(document).ready(function(){
        $('#mouse_test').mousemove(function(e){
            pos = getMousePosition(e);
            var mouseX = pos.x;    
            var mouseY = pos.y;    
     $('#x').attr("value",mouseX);
         $('#y').attr("value",mouseY);

           
        });
    });
</script>
</head>
<body>
    <input type="text" id="x" />
    <input type="text" id="y" />
    <img src="test.jpg" id="mouse_test" align="left">
</body>
</html>



分享到:
评论

相关推荐

    获取图片鼠标点击的坐标

    因在项目中遇到要裁剪不同图片中的多边形形状.获取多边形的坐标很麻烦.找了个DigitizeXY也不好用.自己写了一个.可以复制成python对象格式

    【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx

    3、获取图片元素对象,将鼠标的 x , y 坐标 分别赋值给图片的 left , top 值,为了时鼠标在图片中间,可以减去图片宽高的一半,让图片位置向上向左,注意:不要忘记加上单位 ‘px'  小知识: e.clientX- - -获取...

    Web APIs 之 Selection对象和Range对象的基本使用

    `Selection`对象存储了用户在网页上选择的文本范围或者光标符号的位置等信息,代表网页中的文本选区,可能横跨多个元素,包含文本、图片等等。文本选区是由用户点击鼠标左键并拖拽鼠标选中页面内容产生的,也就是指...

    C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法。分享给大家供大家参考,具体如下: //获取RichTextBox控件中鼠标...//给剪切板设置图片对象 Bitmap bmp = new Bitmap(@Images\editredo.png);

    vue实现裁切图片同时实现放大、缩小、旋转功能

    本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能,分享给大家,具体如下: 实现效果: 裁切指定区域内的图片 旋转图片 ... 当用户鼠标左键在canvas按下时: 挂载对 window 对象mouse

    VC程序开发实例程序之图形技术(3)

    实例102 获取鼠标任意位置的颜色值 184 实例103 提取图片中的对象 186 实例104 手写数字识别 187 3.8 图像字体 189 实例105 旋转的文字 189 实例106 当前系统字体列表 191 实例107 空心文字 192 实例...

    C#开发经验技巧宝典

    0631 如何获得鼠标在窗体上的位置 392 0632 如何交换鼠标左右键功能 392 0633 如何隐藏和显示鼠标 393 0634 如何获取光标闪烁的频率 394 0635 如何获得屏幕上鼠标的坐标 394 0636 如何限制鼠标在某一区域...

    基于Visual C#的AutoCAD开发及其在工程中的应用

    1、在屏幕上选择对象 20 2、根据条件选择对象 20 3、根据范围选择对象 25 实例11 绘制基本图形 27 1、绘制直线 27 2、添加文字 27 3、绘制三维多段线 28 实例12 编辑对象 30 1、复制对象 30 2、删除对象 30 3、旋转...

    易语言程序免安装版下载

    修改应用接口支持库,增强“取快捷方式目标”命令功能,可以获取目标、参数、启始位置、图标、运行方式、快捷键、备注等信息。 9. 修改扩展界面支持库三,解决高级选择夹会导致所在窗口的收不到“首次激活”事件的...

    resize-img:图片放大移动

    coor拖动:在box上按下鼠标被拖动对象随着鼠标移动而移动,鼠标放开则停止移动缩放:在coor上按下鼠标,box高宽随着鼠标位置变化,鼠标放开则停止变化技术构思:container或者document上增加mousemove事件,记录鼠标...

    Visual C++编程技巧精选500例.pdf

    098 如何在状态栏上显示鼠标当前位置? 099 如何使用代码获取状态栏指针? 第6章 图标与光标 100 如何设置光标? 101 如何裁剪光标? 102 如何捕捉光标热区? 103 如何创建一个等待光标? 104 如何结束一个等待光标? 105 ...

    Excel VBA实用技巧大全 附书源码

    01014获取Excel主窗口的左边界位置和顶端位置 01015获取在Excel主窗口中一个窗口所能占有的最大高度和宽度 01016获取当前打印机名称 01017获取MicrosoftExcel剩余内存 01018获取MicrosoftExcel的总内存 01019获取...

    java写的画板

    3、在鼠标移动时间中实现画笔的逻辑(其实就是绘制直线,鼠标每移动一个像素,就会触发移动事件,通过移动事件获取鼠标的坐标,与上一次移动的坐标连线就可以了; (6)刷子功能 刷子其实就是加粗的画笔,画出来的...

    Visual C++程序开发范例宝典 - 第3章

    实例129 获取鼠标任意位置的颜色值 实例130 提取图片中的对象 实例131 手写数字识别 3.7 图像字体 实例132 旋转的文字 实例133 当前系统字体列表 实例134 空心文字 实例135 彩虹文字 实例136 如何在图片上平滑移动...

    python实现按键精灵找色点击功能教程,使用pywin32和Pillow库

    Python图片处理模块PIL(pillow) pywin32的主要作用 1.捕获窗口; 2.模拟鼠标键盘动作; 3.自动获取某路径下文件列表...由于分辨率不同,要修改相应坐标和颜色才能正常在自己电脑上运行 https://github.com/janyroo/pv

    c认证web进阶dom与bom

    DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、通过style属性控制...

    超实用的jQuery代码段

    1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...

    javascript完全学习手册2 源码

    12.3.2 获取XMLHttp,Request对象的信息 12.3.3 向服务器发送请求 12.3.4 处理服务器响应 12.3.5 用户注册实例 12.3.6 处理XML请求 12.3.7 动态列表 第13章 JavaScript安全与异常处理 13.1 JavaScript...

Global site tag (gtag.js) - Google Analytics