如何使图像放大单击按钮

时间:2014-01-22 08:45:11

标签: javascript jquery html css

我有一个JQuery图像缩放插件,当我点击图片时,点击的部分会缩放。

但是我在图像的某些部分有css按钮,当我点击那些按钮时,图像的那一部分应该放大。

但现在点击那些css按钮时它不会缩放。

我该怎么做?

我使用http://www.jacklmoore.com/zoom/进行缩放选项。

Jquery代码:

<script>
    $(document).ready(function(){    
        $('#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>

按钮的HTML代码

<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>

3 个答案:

答案 0 :(得分:0)

您可能需要使用trigger()方法。

  $(".clickMe").click(function(){
      $(".hoverTrigger").trigger('mouseover');
  });

  $(".hoverTrigger").mouseover(function(){
      alert("mouseover");
  });

测试它:http://jsfiddle.net/mehmetakifalp/4eqCV/

答案 1 :(得分:0)

$('#ex4')是获取ID为“ex4”的按钮的jquery你需要为你的css按钮添加类似的zoom处理程序

您可以使用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?

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

答案 2 :(得分:0)

#ext4是一个img元素还是其他接受html的元素? 请找到here

指令

缩放将html附加到分配给它的元素中,这样该元素必须能够接受html,如

  • 等。这不包括元素(见下文)。