javascript - 通过 jquery 或 css 更改图像大小(宽度)

Question

如何用鼠标改变图片大小

例子

来自

到

Answer 1

这是使用 HTML/CSS/JQuery 实现的一种方法:

See this code in action via jsfiddle here .

HTML

<div id="image_frame">
    <div class="shrinking_image"></div>
</div>

JQUERY

$(document).ready(function(){
    $("#image_frame").hover(
        function(){
            $(this).find(".shrinking_image").addClass("image_frame_hover");
        }, 
        function(){
             $(this).find(".shrinking_image").removeClass("image_frame_hover");
        });
});

CSS

#image_frame {
   width:167px; height:27px; 
}

.shrinking_image {
    background-image:url(http://i.stack.imgur.com/q9MCk.jpg);
    background-repeat: no-repeat;
    background-position:0px 0px;
    overflow:hidden;
    width:167px; height:27px;
}

.image_frame_hover {
    overflow:hidden;
    background-position:-70px 0px !important;
    width: 24px !important;
}

See this code in action via jsfiddle here .

基本上，您只是使用 jQuery 的 hover() 函数来分配和取消分配一个特殊的 css，该 css 使用 css 属性 width 的组合，height 和 background-position 以仅显示您关心的照片部分。

希望这对您有所帮助!