怎样用JQuery改变已经加载完毕并显示在页面上的图片的大小

HTML:

<div class="test_w"><img src="images/01jpg" /></div>

JQuery:

$("test_w img")click(function(){

alert($(this)width());

})

为了测试我直接用click动作看能否取得宽度，测试可以得到正常的宽度。

另外，要是程序从后台读取的话，建议把JQuery代码放到内容后面，取不到宽高大小可能是JQ运行了，但内容里没有产生的。

希望我的回答对你有帮助。

你得到的是div的宽度。可以试试这样：

<script type="text/javascript">

var width=$("#test img")width();

alert(width);

</script>

如果还不行，那可能是由于你将这个div隐藏了的原因！

希望可以帮到你。

这个js估计实现不了哦。你可以通过flash控件来实现。

到网上搜下，应该是有这种插件的。 我记得有个叫做imagecrop的插件，就是做裁剪相关的。既然能做裁剪，肯定有做尺寸判断的。

var img = new Image();

imgonload = function(){

alert(thiswidth);

alert(thisheight);

thisonload = null;

};

imgsrc = url;

/

Function to validate File size

/

function findSize(field_id)

{

var fileInput = $("#"+field_id)[0];

byteSize = fileInputfiles[0]fileSize;

return ( Mathceil(byteSize / 1024) ); // Size returned in KB

}

代码如下：

$(document)ready(function(){

// 先取得原大小，加载时获取

$("#IMG")load(function(){

_imgW = thiswidth;

_imgH = thisheight;

// alert(_imgW);

// alert(_imgH);

ImgResize();

});

});

function ImgResize(){

// 再取得可视窗口的宽

var WT = $(window)width();

// 按照宽高比算出调整后的高度

var resizeH = (WT  _imgH) / _imgW;

// 将新的尺寸赋予

$("#IMG")css({width:WT,height:resizeH});

}

// 浏览器调整窗口大小时重新计算

$(window)resize(function(){

ImgResize()

});

1、首先你要先准备好smalljpg、bigjpg小图和大图；

2、然后加载jquery文件；

3、开始写效果代码。

效果代码如下：

------------------html代码------------------------

<p><img class='small_img' src='smalljpg' /></p>

<p>实际尺寸大小：<span id="small_size"></span></p>

<div id='big_div' style="display:none;"><!-- d出层 -->

    <p id="close">X</p>

    <p><img class="big_img" src='bigjpg' /></p>

    <p>实际尺寸大小：<span id="big_size"></span></p>

</div>

Jquery代码：

<script src="jquery文件路径"></script>

<script>

$(document)ready(function(){

    var small            = $('small_img'); //小图

    var big_div         = $('#big_div'); //大图d出层

    var small_size     = $('#small_size'); //显示小图实际尺寸区域

    var big_size        = $('#big_size'); //显示大图实际尺寸区域

    var smallWidth  = smallwidth(); //小图宽度

    var smallHeight = smallheight(); //小图高度

    var bigWidth     = $('big_img')width(); //大图宽度

    var bigHeight    = $('big_img')height(); //大图高度

    var small_str       = smallWidth+' X '+smallHeight+' 像素';

    var big_str          = bigWidth+' X '+bigHeight+' 像素';

    small_sizetext(small_str);  //显示小实际尺寸

    smallclick(function(){ //点击显示大图d出层

        big_divshow();

        big_divcss({  //这里半透明样式我就不写了

            'position' : 'fixed',

            'left' : '0',

            'top' : '0',

            'background' : '#eee'

        });

        big_sizetext(big_str);

    });

    

    $('#close')click(function(){

        big_divhide();

    });

});

</script>

以上就是关于怎样用JQuery改变已经加载完毕并显示在页面上的图片的大小全部的内容，包括:怎样用JQuery改变已经加载完毕并显示在页面上的图片的大小、JQUERY获取隐藏DIV里面图片的宽高、如何在图片上传前用js(jquery)判断图片的尺寸等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！