如何使用jquery调整图像大小

Question

我想在点击函数上调整img的大小。下面是我的代码，它目前不能工作。我不确定我这样做是否正确，任何帮助都会很好。

<script>
$(document).ready(function(){
 $("#viewLarge").click(
 function(){
  $("#newsletter").width("950px");
 });
});
</script>
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630px' src='images/news/hello.jpg'>

Answer 1

在HTML源文件中，不要指定width="630"。取而代之的是使用内联CSS来指定宽度，因为jQuery.width()将操作CSS宽度。另外，向jQuery.width()函数提供一个不带单位(%或px)的数字。

HTML

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id="newsletter" style="width: 630px" src='http://farm3.static.flickr.com/2475/4008724345_56506c8183_b.jpg'>

JavaScript

$(document).ready(function() {
    $("#viewLarge").click(function() {
        $("#newsletter").width(950);
    });
});

Demo

Answer 2

可能是页面正在重新加载，因为您没有阻止链接的默认操作。尝试在设置宽度后添加return false;，这样链接就不会被占用。你真的应该使用样式而不是宽度属性来重写它，尽管在测试中，这似乎并不重要。使用以下代码(但将您的图像替换为我的图像之一)对我来说效果很好。

<script> 
$(document).ready(function(){ 
 $("#viewLarge").click( 
    function(){ 
       $("#newsletter").width("950px");
       return false; 
    }); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' src='images/news/hello.jpg' style="width: 630px;">

Answer 3

嘿，安德斯。试着像上面那个家伙说的那样使用firebug控制台。您必须首先启用它，但它会捕获您的错误。您还可以使用内置在firefox和大多数其他浏览器中的Ctrl+Shift+J来尝试error console。

就你的代码而言，这对我来说很好。

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630' height='250' src='http://www.google.ca/intl/en_com/images/srpr/logo1w.png'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#viewLarge").click(function(){
        $("#newsletter").css('width', '950px');
    });
});
</script>