[英]How to make the image zoom on click on button
我有一个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>
可能您需要使用trigger()方法。
$(".clickMe").click(function(){
$(".hoverTrigger").trigger('mouseover');
});
$(".hoverTrigger").mouseover(function(){
alert("mouseover");
});
$('#ex4')
是jquery以获取ID为“ ex4”的按钮。您也需要为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?
我不知道如何缩放图像的特定区域
#ext4是img元素还是接受html的其他元素? 请在这里找到说明
Zoom将html附加到分配给它的元素内,因此该元素必须能够接受html,例如‹a›,‹span›,‹li›,‹div›等。这不包括‹img›元素(请参见下文) )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.