0

我正在制作一个图像滑块。当用户点击图片时：

  1. 图像滑动并出现在前面
  2. 在下一次单击时，图像被翻转并放大
  3. 在下一次单击时，图像会恢复到原来的大小和位置

在选择其他图像时，会发生相同的步骤。我想要做的是：假设我选择了一个图像并且图像翻转和放大。然后我直接点击另一张图片，所以我想写一个函数，在放大新图片之前，第一张图片应该恢复到原来的大小和位置。

这个怎么做？

    var status=1;
function flipIt(obj){
//$(obj).wrap("<div class='centerImage'></div>")



 console.log("value before Function status   "+status);

if(status==1)
{
alert("i am From JS IF part");
    $(obj).animate({"left": "-=30px","opacity": "0.65"},"slow");
    $(obj).animate({"height":"400px","width":"350px"},30);


  // initial        w295   h354
 $(obj).css("-webkit-transform-style","preserve-3d");
 $(obj).css("-webkit-transition","all 1.0s linear");
 $(obj).css("transform-style","preserve-3d");
 $(obj).css("transition","all 1.0s linear");

 $(obj).css("-webkit-transform","rotateY(180deg)");
 $(obj).css("transform","rotateY(180deg)");
 //$(obj).css("box-shadow","-5px 5px 5px #aaa");

 status=0;
 console.log("after if value set status   "+status);
}
else
{

//alert("i am From JS Else part");
    $(obj).animate({"left": "+=30px","opacity": "0.99"},"slow");
    $(obj).animate({"height":"354px","width":"295px"},30);

 $(obj).css("-webkit-transform-style","preserve-3d");
 $(obj).css("-webkit-transition","all 1.0s linear");
 $(obj).css("transform-style","preserve-3d");
 $(obj).css("transition","all 1.0s linear");


 $(obj).css("-webkit-transform","rotateY(0deg)");
 $(obj).css("transform","rotateY(0deg)");
 //alert("apply css");
    status=1;
    Removecss();

 console.log("ater else value set status   "+status);

}
4

2 回答 2

0

尝试声明一个变量，该变量将保存当前查看/放大图像的名称、类或 id，然后在单击第二个图像之前调用它。

 var previousImage = $(this).attr('class');

并在 if 上尝试放置另一个 if 来检查保存前一个图像属性的变量是否像这样为空

 if(yourFirstStatement){
    if(previousImage != ''){
        //doTheResetOfImageSize();
     }
   //doYourImageChangeSizeAndOtherAnimationThing..
 }

希望这对你有所帮助..:) 干杯....

于 2013-05-08T13:09:59.203 回答
0

如果我对您的理解正确，您的情况可以抽象为拥有一个事物列表，并且当用户选择其中一件事物时，它会发生某些事情（在这种情况下，图像被翻转和放大）。当用户选择列表中的另一个事物时，您希望重置第一个事物的效果。

实现此目的的一种方法是在选定的事物上设置一个 css 类，例如.flipped-and-enlarged. 每当您转换列表中的任何对象时，您首先对具有此类的任何对象执行反向操作：

function flipAndEnlarge(obj) {
    $('.flipped-and-enlarge').reverseFlipAndEnlarge();

    // do the rest of your stuff
}

这样，如果操作正确，任何时候都不会出现多个翻转和放大的图像。

请注意，.reverseFlipAndEnlarge()在上面的代码示例中使用 as 需要将其编写为 jQuery 插件。这样做真的很容易，我强烈推荐这样做，但如果你真的不想这样做，你可能会做类似的事情reverseFlipAndEnlarge($('.flipped-and-enlarged'))。

于 2013-05-08T09:17:19.610 回答