使用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縮小圖像大小？

回答

相關問題