按比例制作缩略图

之前用样式表,超出部分隐藏的方法实现缩略图效果,有时候会产生图片被切掉半个脑袋的情况。这里谈一下用JS按比例制作缩略图的方法:

将以下JS代码放到Head区,然后在Body标签中加入onload=”ReImgSize”进行调用;

  1. function ReImgSize(){ 
  2. var await=document.getElementById("Imgbox");//定义要改变的图片的容器ID 
  3. var imgall=await.getElementsByTagName("img");//取得容器内所有的IMG标签 
  4. for (i=0;i<imgall.length;i++) 
  5. { 
  6. if (imgall[i].width>500) //如果图片的宽度大于500 
  7. { 
  8. var oWidth=imgall[i].width; //取得图片的实际宽度 
  9. var oHeight=imgall[i].height; //取得图片的实际高度 
  10. imgall[i].width="500"; //重设图片的宽度为500 
  11. imgall[i].height=oHeight*500/oWidth; //重设图片的高度 
  12. }

另外,我们可以使用jQuery插件来实现在按比例缩放图片大小的同时,实现图片的预加载:
下载演示文件

崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.