js untuk merealisasikan penskalaan automatik imej dalam kemahiran javascript area paparan tetap-tutorial js-php.cn

js untuk merealisasikan penskalaan automatik imej dalam kemahiran javascript area paparan tetap

WBOY

Lepaskan： 2016-05-16 15:49:49

asal

1174 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah js untuk menskala imej secara automatik dalam kawasan paparan tetap. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;}
</style>
</head>
<body>
<div id="img"><img src="dsds.JPG" onload="resize_img(this,600,400)" /></div>
</body>
</html>
<script type="text/javascript">
function resize_img(pic,w,h){
 var re_new_size=function(r){
 //根据比率重新计算宽度
  return {w:pic.width/r,h:pic.height/r};
  };
 var re_offset=function(n){
 //根据新的宽高度返回偏移量
  return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};
  }; 
 var re_position=function(o,n){
 //重新定位图片
  pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";
  }; 
 var execute=function(rate){
  var new_size=re_new_size(rate),
    offset_new=re_offset(new_size);
  re_position(offset_new,new_size);
  };
 var rate_of_w=pic.width/w,
   rate_of_h=pic.height/h,
   rate;
 if(rate_of_w>=1){
 //图片宽度大于显示区域宽度
    if(rate_of_h>=1){
    //且图片高度大于显示区域高度
    rate=Math.min(rate_of_w,rate_of_h);
    }else{
    //图片高度小于显示区域
     rate=pic.height/h;
     }
 }else{
 //图片宽度小于显示区域宽度
    if(rate_of_h>=1){
    //且图片高度大于显示区域高度
     rate=pic.width/w;
    }else{
    //图片高度小于显示区域高度
     rate=Math.min(rate_of_w,rate_of_h);
     }
   }  
 execute(rate);
 //执行入口  
 }
</script>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.