通过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>

THE 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属性width，height和{{1}的组合的特殊css只显示你关心的照片部分。

希望这有帮助！