关于图片放大和取得尺寸

今天偶然间看到了司徒正美的博客园博客，遂随便翻了翻，觉得里面自己能学到的东西还是挺多的，所以就打算从今天起按照其博客的内容学习，能学到的东西就自己记录在这个博客里。

实际应用中，我们经常要处理图片的大小，如放大镜效果。一般来说，我们是不推荐用图片轮转的方法动用两张或多张图片，除非图片放得很大导致失真。现在我们讨论一下如何放大图片。

第一种情形，图片的长与高已知，但并非写style里面

<script type="text/javascript">
function enlarge(el) {
    el.width = 300;
    el.height = 240;
}
</script>

<div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

改进一下，让其可连续成倍扩大。注意，这里我们利用了IE的私有属性防止图片放大失真严重！

<style type="text/css">
.pic {-ms-interpolation-mode: bicubic}
</style>
<script type="text/javascript">
function enlarge(el) {
el.width *= 2;       // Same as el.width = el.width * 2;
el.height *= 2;      // Same as el.height = el.height * 2;
}
</script>

<div><img class="pic" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

下面高潮来了

我们试图通过style属性试一下

<script type="text/javascript">
function enlarge(el) {
el.style.width = parseInt(el.style.width) * 2 + "px";
el.style.height = parseInt(el.style.height) * 2 + "px";
}
</script>

<div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

为什么不可以呢？我以前也遇到过类似情形，因为el.width是操作dom属性，el.style.width是操作样式。现在终于醒悟过来，且看

<script type="text/javascript">
function enlarge(el) {
alert(el.style.width);
alert(el.style.height);
alert(el.width)
alert(el.height)
}
</script>

<div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg"  style="padding:3px"  onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>

原来只要我们不在style中显式地设置它，它永远为空！所以我们放大或缩小图片，利用width与height是最保险的，而不是style.width与style.height，它们还要加单位呢！

另外在FF与谷歌中，我们还可以用naturalWidth与naturalHeight取得图片的原大小，但注意它们是只读属性，不能用来设置图片的大小！

 

<script type="text/javascript">
function enlarge(el) {
alert(el.naturalWidth);
alert(el.naturalHeight);
}
</script>

<div><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_Jcalendar2.jpg" onclick="enlarge(this)" id="x" alt="Click to enlarge" /> </div>