我想实现
向上按钮始终沿垂直方向工作
和
leftRight 按钮始终沿水平方向工作。从当前图像位置开始
但是这里我的探针在第一次旋转后,如果我首先尝试从另一种方式旋转,它将移动到初始位置而不从该位置旋转。
$(document).on('click', '#choose_nail_reflect_side', function(e) {
var items = $('#order_nail_img');
var lengths = items.length;
var index = 0;
$("#order_nail_img").addClass('side');
console.log($("#order_nail_img").css('transform'));
if ($("#order_nail_img").css('transform') == 'none') {
$("#order_nail_img").css({'transform': 'rotateY(-180deg)'});
}
else {
$("#order_nail_img").css({'transform': ''});
};
});
$(document).on('click', '#choose_nail_reflect_updown', function(e) {
var items = $('#order_nail_img');
var lengths = items.length;
var index = 0;
$("#order_nail_img").addClass('down');
if ($("#order_nail_img").css('transform') == 'none') {
$("#order_nail_img").css({'transform': 'rotateX(-180deg)'});
}
else {
$("#order_nail_img").css({'transform': ''});
};
});
#choose_nail_reflect_side {
margin-top: 56px;
}
#choose_nail_reflect_updown {
}
#order_nail_img {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumbnail">
<img id="order_nail_img" src="https://i.imgur.com/KA2dxD6.jpg" alt="">
</div>
<div class="btn bgSalmon W150 aCenter" id="choose_nail_reflect_updown">
<a href="javascript:void(0);">upDown</a>
</div>
<div class="btn bgSalmon W150 aCenter" id="choose_nail_reflect_side">
<a href="javascript:void(0);">leftRight</a>
</div>
答案 0 :(得分:1)
您有4个案件要处理。首先摆脱内联css,让我们尝试添加/删除类。
让我们上3个课
.verticallyInverted {
transform: rotateX(-180deg);
}
.horzontallyInverted{
transform: rotateY(-180deg);
}
.allInverted {
transform: rotate(-180deg);
}
现在按如下所示修改上下和左右按钮的事件监听器
var imageEl = $('#order_nail_img');
function handleUpdownClick (){
if(imageEl.hasClass("horizontallyInverted") {
imageEl.removeClass("horizontallyInverted");
imageEl.addClass("allInverted");
} else if(imageEl.hasClass("verticallyInverted"){
imageEl.removeClass("verticallyInverted");
} else if(imageEl.hasClass("allInverted")) {
imageEl.removeClass("allInverted");
imageEl.addClass("horizontallyInverted");
}
}
function handleLeftrightClick (){
if(imageEl.hasClass("verticallyInverted") {
imageEl.removeClass("verticallyInverted");
imageEl.addClass("allInverted");
} else if(imageEl.hasClass("horizontallyInverted"){
imageEl.removeClass("horizontallyInverted");
} else if(imageEl.hasClass("allInverted")) {
imageEl.removeClass("allInverted");
imageEl.addClass("verticallyInverted");
}
}
我希望您的代码支持jQuery。