HTMer » 编程开发 » 用JavaScript实现图片缩放效果代码

用JavaScript实现图片缩放效果代码

我们在网页中往往会在某些栏目中放置一些图片,但是我们在设计网页的时候一定要控制好图片的大小,不然图片太大就会把页面撑的非常难看。下面给出用JavaScript实现图片缩放效果代码,可以随意控制图片的输出大小。

<script type="text/javascript" language="javascript">
function fixImage(i,w,h){
var ow = i.width;
var oh = i.height;
var rw = w/ow;
var rh = h/oh;
var r = Math.min(rw,rh);
if (w ==0 && h == 0){
    r = 1;
}else if (w == 0){
    r = rh<1?rh:1;
}else if (h == 0){
    r = rw<1?rw:1;
}
if (ow!=0 && oh!=0){
i.width = ow * r;
i.height = oh * r;
}else{
  var __method = this, args = $A(arguments);
    window.setTimeout(function() {
      fixImage.apply(__method, args);
    }, 200);
}
i.onload = function(){}
}
</script>
 调用方法:

1、调用的图像大小为200&times;200
   <img src="htmer.com.png" onload="fixImage(this,200,200)"/>

2、调用的图像大小为原始图像大小
   <img src="htmer.com.png" onload="fixImage(this,0,0)"/>

顶一下 ▲()   踩一下 ▼()

相关文章