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

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

源代码如下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>通过JS获取图片的相对坐标位置</title>
 7 
 8     <style>
 9         body {margin: 0; padding: 0; }
10         #area{width:300px;height:300px;}
11         #area img{border:none;cursor:pointer;width: 300px;height: 300px;}
12         .testBox {
13             width: 200px;
14             height: 200px;
15             overflow: auto;
16         }
17     </style>
18 </head>
19 
20 <body id="">
21     <h3>通过JS获取图片的相对坐标位置 示例</h3>
22     <div class="testBox">
23         <div id="area" onclick="getClickPos(event);">
24             <img id='imageID'   src="images/1.jpg">
25         </div>
26     </div>
27 
28 
29     <script type="text/javascript">
30         function getClickPos(e){
31             var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
32             var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
33             identifyImage = document.getElementById("imageID");
34             img_x = locationLeft(identifyImage);
35             img_y = locationTop(identifyImage);
36             var xPos = xPage-img_x;
37             var yPos = yPage-img_y;
38             alert('X : ' + xPos + '\n' + 'Y : ' + yPos);
39         }
40         //找到元素的屏幕位置
41         function locationLeft(element){
42             offsetTotal = element.offsetLeft;
43             scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
44             if (element.tagName != "BODY"){
45                 if (element.offsetParent != null)
46                     return offsetTotal+scrollTotal+locationLeft(element.offsetParent);
47             }
48             return offsetTotal+scrollTotal;
49         }
50         //find the screen location of an element
51         function locationTop(element){
52             offsetTotal = element.offsetTop;
53             scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
54             if (element.tagName != "BODY"){
55                 if (element.offsetParent != null)
56                     return offsetTotal+scrollTotal+locationTop(element.offsetParent);
57             }
58             return offsetTotal+scrollTotal;
59         }
60     </script>
61 </body>

 

补充

 

二、js图片上标注热点（相对定位）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .wrap{
            width:200px;
            height: 200px;
            overflow: auto;
            background: #ccc;
            position: relative;
        }
        .ball{
            width:20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="images/1.jpg" alt="">
    </div>
    <script>
        $('.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";
            console.log(top);
            console.log(left);
            $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
        })
    </script>
</body>
</html>

　　

posted @ 2017-11-17 15:27  Mejor0  阅读(4162)  评论(0)  编辑  收藏  举报