一、通过JS获取鼠标点击时图片的相对坐标位置

源代码如下所示： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .wrap{

            width:300px;

            height: 200px;

            background: #ccc;

            position: relative;

        }

        .ball{

            width:20px;

            height: 20px;

            background: red;

            border-radius: 50%;

            position: absolute;

        }

        .box {

            width: 400px;

            height: 400px;

            overflow: auto;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="wrap">

        <img  src="data:images/test.jpg" alt="">

        <div class="container"></div>

    </div>

</div>

<script src="js/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

    $('.wrap').click(function(e){

        var radius=10;//半径

        var offset=$(this).offset();

        var top=e.pageY-offset.top-radius+"px";

        var left=e.pageX-offset.left-radius+"px";

        //$('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>');

        $('.container').html('<div class="ball" style="top:'+top+';left:'+left+'"></div>');

        alert(top+"_"+left);

    })

</script>

</body>

</html>

js点击获取—通过JS获取图片的绝对对坐标位置的更多相关文章

  1. js点击按钮，放大对应图片代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js 点击往div里添加图片（实例）

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  3. js点击事件代理时切换图片如何防抖动

    由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果

  4. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  5. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  6. js实现类似qq表情（插入图片以及获取光标的效果）

    <!doctype html><html style="height:100%"><head><meta charset="ut ...

  7. 解决在页面中无法获取qrcode.js生成的base64的图片

    应用场景 生成带二维码的推广海报图片 旧方法: 将用户自己的推广连接先通过qrcode.js生成二维码,然后再用后台返回的一张背景图片和二维码通过canvas绘制成一张海报. 问题 在部分安卓手机上获 ...

  8. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  9. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

随机推荐

  1. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_10_练习：统计输入的字符串中

    char类型在发生数学运算的时候,可以提升为int类型 这就表示char在A到Z之间的

  2. requests模块（请求接口）

    下面分别是get,post,入参json,添加cookie,添加header,上传/下载文件 的接口请求举例: import requests   #导入模块 #1.发get请求 url = 'htt ...

  3. Week 10 - 474. Ones and Zeroes

    474. Ones and Zeroes In the computer world, use restricted resource you have to generate maximum ben ...

  4. vue组件父与子通信-登录窗口

    一.组件间通信(父组件    -->  子组件)步骤:①父组件在调用子组件 传值 <child-component myValue="123"> </chi ...

  5. python函数及调用

    python的函数是一段重复多次可调用的代码,依据python的函数,我们可以利用函数式的编程,来减少代码的重复. 在本章节中,详细的介绍python的函数,以及python的函数式编程的与众不同,函 ...

  6. rac节点挂掉后，vip飘到别的节点，但是业务连接不上报 no listener问题处理

    客户一套rac系统,三节点,其中一个节点的p260主机主板有问题(经常机器重启,好像是这个型号的通病,主板被炒到20W),临时把故障节点的vip作为业务地址用. 首先,查看确定故障节点vip飘到那个节 ...

  7. web 前端3 javascript基础

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  8. Acwing.835. Trie字符串统计（模板）

    维护一个字符串集合,支持两种操作: “I x”向集合中插入一个字符串x: “Q x”询问一个字符串在集合中出现了多少次. 共有N个操作,输入的字符串总长度不超过 105105,字符串仅包含小写英文字母 ...

  9. python 更快地判断数字的奇数还是偶数

    使用 按位与运算符(&) 将能更加快速地判断一个整数是奇数还是偶数 使用举例如下: def check_number(n): if n & 1: return '奇数' else: r ...

  10. LLVM思想与功能综述

    llvm似乎还有一个奇怪的优化方法:llvm(low level virtual machine)本身就是一种抽象的.虚拟的计算机架构,其特性介于RISC和CISC之间,llvm会先将代码编译为llv ...