我正在研究一个基本上在高级图像查看器上的原型。我实现了(旋转、放大、缩小、向左、向右、向上和向下)。当我首先点击旋转时遇到问题,它似乎搞砸了我的方向控件的方向。(实际上它正在做它应该做的事情)。奇怪的是,如果你先点击方向控制,它就会起作用。
您可以获得 ('rotation') 之类的值,但我不确定它们如何处理,就好像我目前不确定问题一样。
这是我的实现:
JS
var currentScale = 1;
$(".icon-rotate-right").click(function () {
$('#img-contain2').transition({
rotate: '+=90deg'
});
});
$(".icon-chevron-left").click(function () {
$('#img-contain2').transition({
x: '-=90'
});
});
$(".icon-chevron-right").click(function () {
$('#img-contain2').transition({
x: '+=90'
});
});
$(".icon-chevron-up").click(function () {
$('#img-contain2').transition({
y: '-=90',
});
});
$(".icon-plus").click(function () {
if (currentScale >= 5) {
return false;
} else {
currentScale++;
$('#img-contain2').transition({
scale: '+=1'
});
$('#img-contain2').css("margin-top", "-90px");
}
});
$(".icon-minus").click(function () {
if (currentScale <= 1) {
$('#img-contain2').transition({
scale: '.5'
});
$('#img-contain2').css("margin-top", "-240px");
if (currentScale <= 1) {
return false;
}
} else {
currentScale--;
$('#img-contain2').transition({
scale: '-=1'
});
$('#img-contain2').css("margin-top", "-240px");
}
});
HTML
<div class="inner-contain-main">
<div class="viewer">
<div class="control-container">
<i class="icon-rotate-right"></i><i class="icon-plus"></i><i class="icon-minus"></i>
<div class="direction-container"><i class="icon-chevron-left"></i><i class="icon-chevron-up"></i><i class="icon-chevron-right"></i></div>
</div>
<div id="img-contain">
<div id="instructions">
<p>Loading Preparation...</p>
</div>
<div id="img-contain2"></div>
</div>
</div>
我在放大和缩小上设置了限制器,这就是条件的原因。