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

您可以切换课程。

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

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

现在，为big类设置相关的CSS：

.big {
    width: 300px;
}

然后单击，切换此类，使用jQuery绑定事件（首选内联脚本）：

$(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-

Answer 2

我必须在页面上使用多个图像。

然后你可以使用jQuery （因为jQuery被标记）：

$('img').on('click', function(){
     var thisWidth=$(this).width(),
         setWidth = thisWidth >= 300 ? 150 : 300;
     $(this).width(setWidth); 
});

_{假设图像不是动态生成的，或者在dom中使用ajax放置。}

Javascript鼠标事件的功能

2 个答案:

-DEMO-

-DEMO with transition-