使用jquery缩小图像大小？

我需要减少image size使用jquery（而不是div大小），当我输入mouse到div其中包含image。使用jquery缩小图像大小？

我div会，

<div class="toolbarIcon" > 
    <img width="40px" height="40px" src="toolbar/user_login.png"/><label class="toolbarLabel">Login</label> 
</div>

CSS会，

.toolbarIcon { 
    text-align: center; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #E6E6E6; 

    width: 60px; 
    float: left; 
}

而且jquery会，

$(document).ready(function(){ 

    $("#toolbar").corner("5px"); 
    $(".toolbarIcon").corner(); 

    $(".toolbarIcon").mouseover(function(){ 
     $(this).css("background-color","#FFCC80"); 
    }); 
    $(".toolbarIcon").mouseout(function(){ 
     $(this).css("background-color","#EBEBFF"); 
    }); 


    $(".toolbarIcon").mouseup(function(){ 
     $(this).css("background-color","#FFCC80"); 
    }); 
    $(".toolbarIcon").mousedown(function(){ 
     $(this).css("background-color","#E6B85C"); 

    }); 

});

的design来自

enter image description here

要，

enter image description here

注：图像的尺寸为changed.How我能实现这个使用Jquery，当我进入鼠标离子div。

好的答案是肯定赞赏的。

来源

2013-05-03 Human Being

当你将鼠标放在你的div或者'.css（）' – Andrew 2013-05-03 15:17:11

您只需设置图像的大小，浏览器将扩展为你，我会推荐使用.hover()事件，在涵盖了鼠标和鼠标离开：

$(".toolbarIcon").hover(function(){ 
    $(this).css("background-color","#FFCC80"); 
    $(this).find("img").css({height: "30px", width: "30px"}); 
}, function() { 
    $(this).css("background-color","#EBEBFF"); 
    $(this).find("img").css({height: "40px", width: "40px"}) 
});

你也可以只使用CSS本太：

.toolbarIcon:hover img { 
    width: 30px; 
    height: 30px; 
}

取决于你想要的效果确切，你也可能需要调整下面的图像填充时保留它悬停垂直居中。

来源

2013-05-03 15:16:20 jfriend00

+1上时，使用'.attr（）'并且接受答案。很好，正是我需要的！ – 2013-05-03 15:49:25

如何：

$(".toolbarIcon").mouseover(function(){ 
    $(this).find("img").css("width","30px").css("height","30px"); 
});

来源

2013-05-03 15:16:39

您可以使用mouseeneter和mouseleave。只看到thread

$(".toolbarIcon").mouseeneter(function(){ 
    $(this).css("background-color","#FFCC80"); 
    $(this).find("img").height("30").width("30"); 
}); 
$(".toolbarIcon").mouseleave(function(){ 
    $(this).css("background-color","#EBEBFF"); 
    $(this).find("img").height("40").width("40"); 
});

来源

2013-05-03 15:18:08 Anoop

CSS：

LIVE DEMO

.toolbarIcon:hover img{ 
    width:35px; 
    height:35px; 
    padding-bottom:5px; // compensate resize 
}

DEMO WITH CSS3 ANIMATION

.toolbarIcon img{ 
    padding-bottom:0px; 
    -webkit-transition: all 0.2s ease; 
      transition: all 0.2s ease; 
} 
.toolbarIcon:hover img{ 
    width:35px; 
    height:35px; 
    padding-bottom:5px; 
}

来源

2013-05-03 15:20:00

+1你......谢谢你的答复nswer。 – 2013-05-03 15:50:38

@KitePlayer不客气 – 2013-05-03 15:51:34

我认为以下应该工作

$（document）。准备（函数（）{

$('.toolbarIcon img').css('width', '60px') 
});

，或者你可以给在IMG的ID，例如IMG1

$（文件）。就绪（函数（）{

$('#img1').css('width', '60px') 
});

我ahvent测试这一点，但我认为它应该可以工作

来源

2013-05-03 15:24:41 anna

使用jquery缩小图像大小？

回答

相关问题