Question

您好，我需要一个使用大图像的互动元素。此图像大小为1000x1000像素，图像简单，将包含几个问题，是或否。我想要做的是将这个图像放在一个带有隐藏溢出的小div（比如500x300）内，并在图像上添加热点以获得yes / no选项。我想要的是当用户点击是，然后热点链接平移到同一个大图像的特定x / y坐标。查看器只能在500x300窗口内看到。等等等等。这可能吗？它似乎很简单，但我唯一能找到的选项是pan by mouse选项或iframe选项，复杂的div和锚点。我不是java / jquery的专家，但很想找到一个适应性强的脚本。请帮忙！

Answer 1

这听起来很有趣，所以我快速制作了一个自定义解决方案。在这里演示：jsBin

它非常依赖于正确的CSS，所以在bin中检查一下，但这里是JS部分：

var choice = document.querySelectorAll('.choice'),
    image  = document.getElementById('image')

for ( var i=0; i<choice.length; i++) {
  choice[i].addEventListener('click', function (event) {

    var x = this.dataset['x'],
        y = this.dataset['y'];

    image.style.top = '-'+y+'px';
    image.style.left = '-'+x+'px';

  })  
}

Answer 2

我刚刚制作了一张带有演示图片的Fiddle，您可以继续。

HTML：

<div class="imgHolder">
  <div class="hotspot one">Click</div>
  <img src="image.jpg" />
</div>

CSS：

.imgHolder {
  overflow:hidden;
  width:300px;
  height:300px;
  position:relative;
 }
 .hotspot.one {
  position:absolute;
  top:10px;
  padding:2px;
  background-color:#fff;
  left:10px;
}
.hotspot:hover {
  cursor:pointer;
}
img {
  position:relative;
  z-index:-1;
}

jQuery：

$(".hotspot").on("click", function () {
 $("img").animate({
    "right": "+=100px"
 });
});

供参考：http://api.jquery.com/animate/

你可以，例如在特定位置淡入淡出热点并使用animate()移动到下一个热点。

Answer 3

使用css过渡动画。使用一系列javascript对象设置您希望按钮将图像移动到图像中的位置。然后，使用div容器内部图像顶部的绝对定位来设置锚点，文本等。最后，在jQuery中添加一个单击操作，将不同的位置分配给该容器的顶部和左侧css。

然后，最终结果是你单击一个锚点，左边和顶部位置通过jQuery中的css分配给容器，转换将使用锚点滑动图像。

I set up a fiddle here.

这是来自小提琴的html：

<div id="window">
    <div id="container">
        <img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
        <ul>
            <li><a id="city" href="#">City</a></li>
            <li><a id="bottom" href="#">Bottom</a></li>
        </ul>
    </div>
</div>

CSS：

#window {
    width:500px;
    height:300px;
    overflow:hidden;
    position:relative;
}
#window a {
    position: absolute;
    z-index: 2;
    display: block;
    padding: 10px;
    background: rgba(255,255,255,.5);
}
#city {
    top: 20px;
    left: 20px;
}
#bottom {
    top: 220px;
    left: 220px;
}
#container {
    -webkit-transition:left 2s, top 2s, -webkit-transform 2s;
    transition:left 2s, top 2s, transform 2s;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

这里有一些javascript来举例说明将位置设置为对象。

var city = {
    top: -200,
    left: -200
};
var bottom = {
    top: -700,
    left: -100
}

$('a').click(function() {
    var t = this.id;
    var c = $('#container');
    if (typeof eval(t) !== 'undefined') {
        c.css({
            'top': eval(t).top,
            'left': eval(t).left
        });
    }
});

jquery使用按钮在小div容器内平移大图像

3 个答案: