js 缩放图片
程序员文章站
2022-07-08 12:06:50
...
使用javascript 如何缩放图片呢?
先看一下效果
点击"缩放",效果如下:
页面代码:
<span style="float:left"> <a href="javascript:com.whuang.hsj.scale22(true,'company_module_pic');">放大</a> | <a href="javascript:com.whuang.hsj.scale22(false,'company_module_pic');">缩小</a> </span> <img src="/yhyc/upload/image/20141016/20141016212719_312.jpg" id="company_module_pic" alt="轮播图" width="500">
说明:company_module_pic 是img标签的id
com.whuang.hsj.scale22 的实现:
/*** * 缩放图片 */ com.whuang.hsj.scale22=function(isBig,company_module_pic){ if (typeof company_module_pic == 'string') { company_module_pic=com.whuang.hsj.$$id(company_module_pic); if(company_module_pic==null ||company_module_pic==undefined){ company_module_pic=com.whuang.hsj.$$one(company_module_pic); } } if(company_module_pic==null ||company_module_pic==undefined){ return; } var oldWidth=company_module_pic.width; if(oldWidth==0){ return; } var speed33=50; if(com.whuang.hsj.isHasValue(company_module_pic.src)){ if(isBig){ oldWidth+=speed33; }else{ oldWidth-=speed33; } if(oldWidth>1300||oldWidth<400){ alert("不能再缩放了"); return; } company_module_pic.width=oldWidth; } };
依赖的方法:
/******************************************************************************* * by id */ com.whuang.hsj.$$id = function(name22) { return document.getElementById(name22); }; /*** * if is radio ,please use com.whuang.hsj.$$arr * @param name22 * @returns */ com.whuang.hsj.$$one = function(name22) { if (com.whuang.hsj.isHasValue(name22)) { var names222=document.getElementsByName(name22); //alert("names222:"+names222); //alert("typeof:"+(typeof names222 )); var className=Object.prototype.toString.call(names222); var boolean_isArray; var ieHtmlCollection='[object HTMLCollection]'; if(isIEtest)//if browser is IE { boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ; }else { boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]' )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList; } if(names222){ if(boolean_isArray){ return names222[0]; }else{ return names222;//why add [0] ?? } }else{ return ""; } } else { return ""; } }; /** * whether has value * * @param {Object} * input */ com.whuang.hsj.isHasValue = function(input) { if (typeof input == "number" && input == "0") { return true; } if(!input) { return false; } if(input==""||input==undefined||com.whuang.hsj.isWholeWhitespace(input)){ return false; } return true; }; /** * is whitespace entirely * * @param {Object} * inputString */ com.whuang.hsj.isWholeWhitespace = function(inputString) { if (typeof inputString == "object") { return inputString; } var bootInit = true; if (inputString == "" || inputString == undefined) { return false; } for ( var i = 0; i < inputString.length; i++) { var c = inputString.charAt(i); if (!com.whuang.hsj.isWhitespace(c)) { bootInit = false; break; } } return bootInit; }; com.whuang.hsj.isWhitespace = function(input) {// whether has whitespace var whitespace = " \t\n\r"; for ( var i = 0; i < input.length; i++) { var c = input.charAt(i); if (whitespace.indexOf(c) >= 0) { return true; } } return false; };
注意:
(1)com.whuang.hsj.scale22方法的第一个参数是boolean类型,必须是false或true;
第二个参数可以是img的id ,也可以是img的name
上一篇: js图片不变形缩略图
下一篇: SMTP邮件发送程序