Javascript 如何在单击按钮时进行图像缩放

我有一个

JQuery

图像缩放插件，当我点击图像时，点击的部分将缩放

但我在图像的某些部分有css按钮，当我点击这些按钮时，图像的那个部分应该放大

但现在当我点击那些css按钮时，它并没有缩放

我该怎么做

我使用的是缩放选项

Jquery代码：

<script>
    $(document).ready(function(){    
        $('#ex4').zoom({ on:'toggle',duration: 500 });
    });

$（文档）.ready（函数（）{
$（'#ex4'）.zoom（{on:'toggle'，duration:500}）；
});

按钮的css

.f1 {
    left: 193px;
    position: relative;
    top: -400px;
}

.f2 {
    left: 166px;
    position: relative;
    top: -250px;
}

.f3 {
    left: 117px;
    position: relative;
    top: -180px;
}

.f4 {
    left: 425px;
    position: relative;
    top: -363px;
}

.f5 {
    left: 339px;
    position: relative;
    top: -375px;
}
</script>

<span class="f1"><a href="#">1</a></span>
<span class="f2"><a href="#">2</a></span>
<span class="f3"><a href="#">3</a></span>
<span class="f4"><a href="#">4</a></span>
<span class="f5"><a href="#">5</a></span>
<span class="f6"><a href="#">6</a></span>
<span class="f7"><a href="#">7</a></span>
<span class="f8"><a href="#">8</a></span>
<span class="f9"><a href="#">9</a></span>
<span class="f10"><a href="#">10</a></span>

.f1{
左：193px；
位置：相对位置；
顶部：-400px；
}
.f2{
左：166px；
位置：相对位置；
顶部：-250px；
}
.f3{
左：117px；
位置：相对位置；
顶部：-180px；
}
.f4{
左：425px；
位置：相对位置；
顶部：-363px；
}
.f5{
左：339px；
位置：相对位置；
顶部：-375px；
}

按钮的html代码

.f1 {
    left: 193px;
    position: relative;
    top: -400px;
}

.f2 {
    left: 166px;
    position: relative;
    top: -250px;
}

.f3 {
    left: 117px;
    position: relative;
    top: -180px;
}

.f4 {
    left: 425px;
    position: relative;
    top: -363px;
}

.f5 {
    left: 339px;
    position: relative;
    top: -375px;
}
</script>

<span class="f1"><a href="#">1</a></span>
<span class="f2"><a href="#">2</a></span>
<span class="f3"><a href="#">3</a></span>
<span class="f4"><a href="#">4</a></span>
<span class="f5"><a href="#">5</a></span>
<span class="f6"><a href="#">6</a></span>
<span class="f7"><a href="#">7</a></span>
<span class="f8"><a href="#">8</a></span>
<span class="f9"><a href="#">9</a></span>
<span class="f10"><a href="#">10</a></span>

---

您可能需要使用trigger（）方法

测试它：

$（'#ex4'）

是jquery吗要获得id为“ex4”的按钮，您还需要为css按钮添加类似的

缩放

处理程序

您可以使用jQuery类选择器执行此操作，该选择器是一个点：

$('#ex4').zoom({ on:'toggle',duration: 500 }); // your existing example
   ^ the # symbol means find an html element with this ID

$('.f1').zoom({ on:'toggle',duration: 500 }); // adds zoom to all elements with the f1 class
   ^ see the difference?

我不知道如何缩放图像的特定区域

ext4是img元素还是接受html的其他元素？ 请查说明书

---

Zoom在分配给它的元素内附加html，以便元素必须能够接受html，如èa›、èspan›、èli›、èdiv›等。这不包括èimg›元素（见下文）。

您有任何控制台错误吗。。