js 缩放图片

2022-04-15 04:11:52

使用JavaScript 如何缩放图片呢?

先看一下效果
js 缩放图片
 点击"缩放",效果如下:
js 缩放图片
 页面代码:

Html代码  js 缩放图片
  1.                             <span style="float:left"> <a href="javascript:com.whuang.hsj.scale22(true,'company_module_pic');">放大</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
  2. <a href="javascript:com.whuang.hsj.scale22(false,'company_module_pic');">缩小</a>  
  3. </span>  
  4.                         <img src="/yhyc/upload/image/20141016/20141016212719_312.jpg" id="company_module_pic" alt="轮播图" width="500">  
  5.                           

 说明:company_module_pic 是img标签的id

com.whuang.hsj.scale22 的实现:

Js代码  js 缩放图片
  1. /*** 
  2. * 缩放图片 
  3. */  
  4. com.whuang.hsj.scale22=function(isBig,company_module_pic){  
  5.     if (typeof company_module_pic == 'string') {  
  6.         company_module_pic=com.whuang.hsj.$$id(company_module_pic);  
  7.         if(company_module_pic==null ||company_module_pic==undefined){  
  8.             company_module_pic=com.whuang.hsj.$$one(company_module_pic);  
  9.         }  
  10.     }  
  11.     if(company_module_pic==null ||company_module_pic==undefined){  
  12.         return;  
  13.     }  
  14.     var oldWidth=company_module_pic.width;  
  15.     if(oldWidth==0){  
  16.         return;  
  17.     }  
  18.     var speed33=50;  
  19.     if(com.whuang.hsj.isHasValue(company_module_pic.src)){  
  20.         if(isBig){  
  21.             oldWidth+=speed33;  
  22.         }else{  
  23.             oldWidth-=speed33;  
  24.         }  
  25.         if(oldWidth>1300||oldWidth<400){  
  26.             alert("不能再缩放了");  
  27.             return;  
  28.         }  
  29.         company_module_pic.width=oldWidth;  
  30.     }  
  31.       
  32.   
  33. };  

 依赖的方法:

Js代码  js 缩放图片
  1. /******************************************************************************* 
  2.  * by id 
  3.  */  
  4. com.whuang.hsj.$$id = function(name22) {  
  5.     return document.getElementById(name22);  
  6. };  
  7. /*** 
  8.  * if is radio ,please use com.whuang.hsj.$$arr 
  9.  * @param name22 
  10.  * @returns 
  11.  */  
  12. com.whuang.hsj.$$one = function(name22) {  
  13.     if (com.whuang.hsj.isHasValue(name22)) {  
  14.         var names222=document.getElementsByName(name22);  
  15.         //alert("names222:"+names222);  
  16.         //alert("typeof:"+(typeof names222 ));  
  17.         var className=Object.prototype.toString.call(names222);  
  18.         var boolean_isArray;  
  19.         var ieHtmlCollection='[object HTMLCollection]';  
  20.         if(isIEtest)//if browser is IE  
  21.         {  
  22.                  boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ;  
  23.         }else  
  24.         {  
  25.                  boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]'  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;  
  26.         }  
  27.         if(names222){  
  28.              if(boolean_isArray){  
  29.                      return names222[0];  
  30.              }else{  
  31.                      return names222;//why add [0] ??  
  32.             }  
  33.         }else{  
  34.             return "";  
  35.         }  
  36.     } else {  
  37.         return "";  
  38.     }  
  39. };  
  40. /** 
  41.  * whether has value 
  42.  *  
  43.  * @param {Object} 
  44.  *            input 
  45.  */  
  46. com.whuang.hsj.isHasValue = function(input) {  
  47.     if (typeof input == "number" && input == "0") {  
  48.         return true;  
  49.     }  
  50.     if(!input)  
  51.     {  
  52.         return false;  
  53.     }  
  54.     if(input==""||input==undefined||com.whuang.hsj.isWholeWhitespace(input)){  
  55.         return false;  
  56.     }  
  57.     return true;  
  58. };  
  59. /** 
  60.  * is whitespace entirely 
  61.  *  
  62.  * @param {Object} 
  63.  *            inputString 
  64.  */  
  65. com.whuang.hsj.isWholeWhitespace = function(inputString) {  
  66.     if (typeof inputString == "object") {  
  67.         return inputString;  
  68.     }  
  69.     var bootInit = true;  
  70.     if (inputString == "" || inputString == undefined) {  
  71.         return false;  
  72.     }  
  73.     for ( var i = 0; i < inputString.length; i++) {  
  74.         var c = inputString.charAt(i);  
  75.         if (!com.whuang.hsj.isWhitespace(c)) {  
  76.             bootInit = false;  
  77.             break;  
  78.         }  
  79.     }  
  80.     return bootInit;  
  81. };  
  82. com.whuang.hsj.isWhitespace = function(input) {// whether has whitespace  
  83.     var whitespace = " \t\n\r";  
  84.     for ( var i = 0; i < input.length; i++) {  
  85.         var c = input.charAt(i);  
  86.         if (whitespace.indexOf(c) >= 0) {  
  87.             return true;  
  88.         }  
  89.     }  
  90.     return false;  
  91. };  

 

注意:

(1)com.whuang.hsj.scale22方法的第一个参数是boolean类型,必须是false或true;

第二个参数可以是img的id  ,也可以是img的name

上一篇：30个使用自定义字体的网页设计作品优秀案例


下一篇：【Android UI设计与开发】10：滑动菜单栏（二）SlidingMenu 动画效果的实现