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 id="123456" onclick="lookinfo(this)" class="red-ball" style="left:' + left + 'px;top:' + top + 'px;width:20px;height:20px"></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
方式二：js
<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>
            .img {
                position: relative;
                border: solid 1px #000;
                display: inline-block;
            }

                .img .marker {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    background: #f00;
                }
        </style>
    </head>
    <body>
        <div>
            <p>点击第1张大图</p>
            <div class="img" id="dv">
                <img id="bigImg" src="/img/home/bg_defaultpage.jpg" width="800px" height="600px">
            </div>
        </div>
        <div>
            <p>在第2张小图上做点标记</p>
            <div class="img" id="dv2">
                <img id="smallImg" src="/img/home/bg_defaultpage.jpg" width="500px" height="300px">
            </div>
        </div>
    </body>
    </html>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例
        var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例
        function createMarker(x, y, divName) {
            var div = document.createElement('div');
            div.className = 'marker'; div.style.left = x + 'px'; div.style.top = y + 'px';
            document.getElementById(divName).appendChild(div)
        }
        document.getElementById('dv').onclick = function (e) {
            e = e || window.event;
            var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
            createMarker(x, y, 'dv');

            //获取图片的高度和宽度
            var myImg = document.querySelector("#bigImg");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
            // alert("图片高度："+currHeight);
            // alert("图片宽度："+currWidth);
            ProportionWidthInImg = x / currWidth;
            ProportionHeightInImg = y / currHeight;
            //  alert("图片比例高度："+ProportionHeightInImg);
            // alert("图片比例宽度："+ProportionWidthInImg);
            MarkSmallImg();

        }
        function MarkSmallImg() {
            var myImg = document.querySelector("#smallImg");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
            //  alert("图片高度："+currHeight);
            //  alert("图片宽度："+currWidth);

            //给第二个刘亦菲加标记点
            var x = currWidth * ProportionWidthInImg;
            var y = currHeight * ProportionHeightInImg;
            createMarker(x, y, 'dv2');
        }
    </script>
View Code

 

 

posted @ 2021-12-22 16:13  二姐1511  阅读(722)  评论(0)  编辑  收藏  举报