javascript - 将工具提示/热点添加到 360 度图像查看器

Question

我有一个在我的站点中使用的图像旋转器，但现在我需要能够将热点添加到某些角度。这是我使用的插件。
http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/#comments
有没有人用过这个并且能够调整它来添加热点？

Answer 1

我查看了插件代码，它不支持使用图像映射，所以我提取了您需要的基本代码，并在第三张图像上添加了一个大黄点，您可以将鼠标悬停在上面 -这是一个演示。

HTML

<div id="product" style="width: 640px; height: 480px; overflow: hidden;">
    ...
    <img src="03.jpg" usemap="#img03" />
    <map name="img03" width="640" height="480">
        <area shape="circle" coords="366,154,65" href="#" title="Yellow Dot!" />
    </map>
    ...
</div>

CSS

.notseen {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

脚本

// original: http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
// No need to include the plugin, this is a simplified version of it

jQuery(document).ready(function ($) {
    var $product = $('#product'),
        $imgs = $product.find('img'),
        imageTotal = $imgs.length - 1,
        clicked = false,
        widthStep = 4,
        currPos,
        currImg = 0,
        lastImg = 0;
    $imgs.bind('mousedown', function (e) {
        e.preventDefault(); // prevent dragging images
    })
        .filter(':gt(0)').addClass('notseen');

    $product.bind('mousedown touchstart', function (e) {
        if (e.type == "touchstart") {
            currPos = window.event.touches[0].pageX;
        } else {
            currPos = e.pageX;
        }
        clicked = true;
        return false;
    });
    $(document)
        .bind('mouseup touchend', function () {
        clicked = false;
    })
        .bind('mousemove touchmove', function (e) {
        if (clicked) {
            var pageX;
            if (e.type == "touchmove") {
                pageX = window.event.targetTouches[0].pageX;
            } else {
                pageX = e.pageX;
            }
            widthStep = 4;
            if (Math.abs(currPos - pageX) >= widthStep) {
                if (currPos - pageX >= widthStep) {
                    currImg++;
                    if (currImg > imageTotal) {
                        currImg = 1;
                    }
                } else {
                    currImg--;
                    if (currImg < 1) {
                        currImg = imageTotal;
                    }
                }
                currPos = pageX;
                $imgs.eq(lastImg).addClass('notseen');
                $imgs.eq(currImg).removeClass('notseen');
                lastImg = currImg;
                // $obj.html('<img src="' + aImages[options.currImg] + '" />');
            }
        }
    });
});