js缩略图原理

JavaScript07

js缩略图原理,第1张

1,按给定的宽和高进行智能缩小

2,按给定的宽和高进行固定缩小(会出现图片变形情况)

3,按给定的宽进行等比例缩小

4,按给定的高进行等比例缩小

5,宽和高按百分比缩小

所谓的缩略图其实就是设置了一个长宽小点的<img>去存放这张图片，在<img>的点击事件中再去更改它的长宽达到放大效果，当然这样可能会打乱页面布局，所以你可以做成像QQ空间那样，点击图片后利用遮罩层显示放大的图片。

先设置一段JS代码，如：function DrawImage(MyPic,W,H){

var flag=false

var image=new Image()

image.src=MyPic.src

if(image.width>0 &&image.height>0){

flag=true

if(image.width/image.height>= W/H){

if(image.width>W){

MyPic.width=W

MyPic.height=(image.height*W)/image.width

}

else{

MyPic.width=image.width

MyPic.height=image.height

}

}

else{

if(image.height>H){

MyPic.height=H

MyPic.width=(image.width*H)/image.height

}

else{

MyPic.width=image.width

MyPic.height=image.height

}

}

}

}

图片读取：<img src="图片路径" onload=""javascript:DrawImage(this,200,120)""border=""0"" width=""200"" height=""120""/>