0

我想要做的是，当页面加载时，我正在将图像重置为我想要的小尺寸。

如果用户稍后单击图像，它应该会用动画放大，我已经完成了这一部分。

当用户再次单击该图像时，应将其大小调整为加载页面后分配的大小，我尝试了切换事件，但这不起作用，切换只会使我的图像从页面上消失。所以我通过使用 if 和 else 条件以及一个名为“small”的标志变量创建了一个切换事件的替代方法，但问题是 click 事件只工作一次，即：如果图像尺寸较小并且我点击它，则图像被放大但是当我再次单击它时，单击事件被触发但它不起作用，我希望是否有任何方法可以使它与切换事件一起使用，否则我想通过使用 if 和点击事件中的其他条件。

这是HTML：

<html>
<head>
    <title></title>
    <script src="jquery-1.10.1.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
      <img src="wordpress.jpg" class="small-Img" id="test"> <br>
          <img src="store.jpg" class="small-Img">

</body>
</html>

这是脚本：

$(document).ready(function() {

         var small;
   $('.small-Img').on('load',function(){


        $(".small-Img").attr('width','200');
          small=Number(1);
    });

    $('.small-Img').on('click',function ()  {
        alert("event fired");
        if(small==1){
        var obj=$(this);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(this).animate({ height: originalHeight,  width: originalWidth   }, 1000, function() { });
            small=Number(0);

        }
        if(small==0){
            $(".small-Img").attr('width','200');
            small=Number(1);
        }
    });

    });
4

4 回答 4

2

你的代码

$(".small-Img").attr('width','200');

在图像上设置一个width属性，类似于<img src="url" width="200">可能不会导致大小更改的属性。尝试

$('.small-Img').css('width','200px');

或动画收缩

 $('.small-Img').animate({  width: '200px'   }, 1000);

您还可以获得更好的结果，使图像的属性变小而不是窗口对象的属性

jsfiddle

于 2013-08-02T16:53:21.303 回答
2

听起来问题不在于该事件没有被多次触发，而是它没有进入您的 if 语句。尝试制作小的布尔变量而不是数字，这样你就可以避免所有的==vs===混乱

编辑：另外，您可能想要一个else if这样它在每次点击时放大后就不会缩小。

于 2013-08-02T16:53:41.430 回答
2

演示

用于设置或获取我们.css()不使用的 css 值.attr()

==只检查value

===检查value和datatype 

$(document).ready(function () {
    var small;
    $('.small-Img').on('load', function () {
        $(".small-Img").css('width', '200'); //changed attr to css
        small = 1;
    });
    $('.small-Img').on('click', function () {
        if (small === 1) { //changed == to ===
            var obj = $(this);
            var originalWidth = obj[0].naturalWidth;
            var originalHeight = obj[0].naturalHeight;
            $(this).animate({
                height: originalHeight,
                width: originalWidth
            }, 1000, function () {});
            small = 0;
        }
        if (small === 0) {  //changed == to ===
            $(".small-Img").css('width', '200'); //changed attr to css
            small = 1;
        }
    });
});
于 2013-08-02T16:58:30.287 回答
0

首先将“小”作为图像本身的数据属性如何？没什么大不了的，但更方便一点（恕我直言）。接下来是，当您想要检查第二次点击时，您可能会考虑执行 else if 而不仅仅是 if。不确定它是否有区别，但这是一个明显的逻辑区别，你可以有一个或另一个——不能两者兼而有之。第三，如果您将宽度重新设置为动画，您还可以为高度设置动画，计算方法是您的小高度除以原始高度乘以原始宽度。似乎工作，在这里看到它：http: //jsfiddle.net/snowMonkey/7nCMF/1/

    $('.small-Img').css('width','200px').data("small", 1);

    $('.small-Img').on('click',function ()  {
      var that=this;
      this.smallWidth = "200px";
      this.smallHeight = (200/$(this)[0].naturalWidth) * $(this)[0].naturalHeight+"px";
      if($(this).data("small")===1 ){

        var obj=$(that);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(that).animate({
            height: originalHeight, 
            width: originalWidth  
        }, 1000, function() { });
        $(that).data("small",0);
      } else if($(this).data("small")===0){
          $(that).animate({
              width: that.smallWidth,
              height: that.smallHeight
          }, 1000, function(){}).data("small", 1);
      }
    });

祝你好运！

于 2013-08-02T17:29:26.440 回答