一、通过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. Delphi XE2 之 FireMonkey 入门(19) - TFmxObject 的子类们(表)

    参考: 和 FMX 相关的类(表) TFmxObject IFreeNotification             TAnimation TBitmapAnimation           TBi ...

  2. 类TreeSet

    /* * TreeSet能够对元素按照某种规则进行排序 * * 排序有2种方式 * A自然排序 * B比较器排序 * */ import java.util.TreeSet; /* * TreeSet ...

  3. 剑指offer--day01

    1.1题目:二维数组中的查找:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断 ...

  4. python3.5+django2.0快速入门(二)

    昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...

  5. 安装testlink时，出现”testlink/gui/templates_c、testlink/logs、testlink/upload_area不可写‘解决办法

    在Testlink安装到最后,'...目录是否可写(由于用户运行webserver进程)’过程出错,如下图所示 1.首先想到/var/www/html/testlink/gui/templates_c ...

  6. Makefile project

    1 Makefile里出现IDF_PATH,所以要在工程属性里的environment环境变量添加IDF_PATH,对其解释,指出路径. 2  项目中用了shell文本,如果用Python 语言,要确 ...

  7. java静态代码块,构造方法,初始化块的执行顺序

    代码Parent和Sub进行讲解 public class Parent { private static final String name; public Parent() { System.ou ...

  8. spring-第十六篇之AOP面向切面编程之Spring AOP

    1.上一篇介绍了AspectJ在AOP的简单应用,让我们了解到它的作用就是:开发者无需修改源代码,但又可以为这些组件的方法添加新的功能. AOP的实现可分为两类(根据AOP修改源码的时机划分): 1& ...

  9. Linux快速访问多个目录

    Linux下实现多个目录之间快速切换 dirs -v # 显示栈目录dirs -c # 清空栈目录 pushd # 加入当前目录pushd director   #  加入指定目录pushd +/-i ...

  10. poj_1995 Raising Modulo Numbers （快速幂）

    [题目链接] http://poj.org/problem?id=1995 [算法] 基本快速幂(二进制思想) 注意两个int相乘可能溢出,加(long long)但是相乘不要加括号,不然会先溢出在类 ...