js实现图片打点

通过js实现在图片上打点，以下按jquery方式和js的方式实现，支持按容器比例定位标记点。
方式一jquery：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试图片打点</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .wrap {
            width: 78%;
            left: 21%;
            border: 1px solid;
            position: relative;
            overflow-y: auto;
            overflow-x: auto;
        }

            .wrap span {
                display: inline-block;
            }

                .wrap span.red-ball {
                    position: absolute;
                    background-color: #EF6191;
                    opacity: 0.7;
                    border-radius: 100%;
                    transition: 0.4s;
                }

                    .wrap span.red-ball:hover {
                        opacity: 1;
　　　　　　　　　　　　　　cursor: crosshair;


                    }

        .datatree {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 20%;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="/img/device/pmt.jpg">
    </div>
</body>
</html>

<script type="text/javascript">
 2     $(function () {
 3         var ProWidthInImg = 0.3983202475944492;//鼠标所选位置相对于所选图片宽度的比例
 4         var ProHeightInImg = 0.4090909090909091; //鼠标所选位置相对于所选图片高度的比例
 5         //获取图片的高度和宽度
 6         var myImg = $('.wrap');
 7         var currWidth = myImg.width();
 8         var currHeight = myImg.height();
 9 
10         //打点示例
11         var left = currWidth * ProWidthInImg;
12         var top = currHeight * ProHeightInImg;
13         myImg.append('<span >);
14 
15         function setMarker(r) {
16             var radius = r;
17             var w = radius * 2;
18             var h = radius * 2;
19             var x, y, offset;
20 
21             return function (e) {
22                 offset = $(this).offset();
23                 x = e.pageX - offset.left;
24                 y = e.pageY - offset.top;
25                 ProWidthInImg = x / currWidth;
26                 ProHeightInImg = y / currHeight;
27                 //alert(ProWidthInImg + ":" + ProHeightInImg);
28                 $('<span onclick="lookinfo(this)" class="red-ball">').css({
29                     left: x,
30                     top: y,
31                     width: w,
32                     height: h
33                 }).appendTo(this);35             }
36         }
37         $('.wrap').on('click', setMarker(10));
38     });
39     function lookinfo(obj) {
40         stopBubble(obj.event);
41         alert($(obj).attr("style"))
42     }
43     function stopBubble(e) {
44         if (e && e.stopPropagation)
45             e.stopPropagation();
46         else
47             window.event.cancelBubble = true;
48     }
49 </script>
View Code