鼠标事件的 JavaScript 函数

Question

我正在尝试更改以下代码，这样我就可以单击一次以使图像更大，然后再次单击，而不必单击并按住链接的图像来使其更大(150 变为 300)使图像恢复较小。我必须对页面上的多个图像执行此操作。 (预先警告，我不太了解 jquery，对 javascript 有非常基本的了解。但我正在学习!)

function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(150) + 'px';}'

<img src="picture.jpg" onmousedown="Down(this)" onmouseup="Up(this)" />

Answer 1

您可以切换类(class)。

首先，您应该设置一个类来定位特定元素，并且设置 width 属性是首选方法:

<img class="imgToggling" src="picture.jpg" width="150">

现在，为 big 类设置相关 CSS:

.big {
    width: 300px;
}

然后单击，切换此类，使用 jQuery 绑定(bind)事件(优于内联脚本):

$(function () { //shorthand for document ready handler
    $('.imgToggling').on('click', function () {
        $(this).toggleClass('big');
    });
});

-DEMO-

如果您希望获得某种过渡，请添加此 CSS 规则，例如:

img.imgToggling {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

-DEMO with transition-