WithCoderWithCoderWithCoder

JS获取鼠标点击时图片的相对坐标位置并添加自定义内容

    因功能需要在图片上点击时,添加自定义的内容。本来想用图片的热区useMap实现,但发现useMap只支持href跳转属性,不能添加自定义的内容。最后通过网上搜索方案,找到如下解决方法。

    在点击图片时,通过鼠标点击位置计算点击的坐标,然后在点击的位置添加自定义内容。

    示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_self">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache,must-ridate">
    <meta http-equiv="expires" content="0">
    <script src="./plugins/jquery/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <img id="imageId" src="./images/1.jpg" onclick="handleClick(event)">
</div>
</body>
<script>
    // 取图片鼠标点击位置
    function handleClick(e) {
        var xPage = (navigator.appName == 'Netscape') ? e.pageX : event.x + document.body.scrollLeft;
        var yPage = (navigator.appName == 'Netscape') ? e.pageY : event.y + document.body.scrollTop;
        imgEl = document.getElementById("imageId");
        img_x = locationLeft(imgEl);
        img_y = locationTop(imgEl);
        var xPos = xPage - img_x;
        var yPos = yPage - img_y;

        // 当前点击位置
        var hotspot = {x: xPos, y: yPos};
        addHotspot(hotspot);
    }

    // 找到元素的屏幕位置
    function locationLeft(element) {
        var offsetTotal = element.offsetLeft;
        var scrollTotal = 0; // element.scrollLeft but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationLeft(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }

    // 找到元素的屏幕位置
    function locationTop(element) {
        var offsetTotal = element.offsetTop;
        var scrollTotal = 0; // element.scrollTop but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationTop(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }

    // 添加自定义内容
    function addHotspot(hotspot) {
        var x = hotspot.x - 12;
        var y = hotspot.y - 12;
        var src = '/images/p.png';

        imgEle = '<img ' + ' src="' + src + '"  style="top: '
            + y + 'px; left: ' + x + 'px; position: absolute; cursor: pointer;"'
            + ')" />';
        $('.container').append(imgEle);
    }
</script>
</html>

     效果图如下(定位点为添加的自定义图片):

    1-201110115451537.png


欢迎分享交流,转载请注明出处:WithCoder » JS获取鼠标点击时图片的相对坐标位置并添加自定义内容