js 缩放图片 博客分类： javascript imgimage图片缩放js缩放图片scale

使用javascript 如何缩放图片呢?

先看一下效果

 点击"缩放",效果如下:

 页面代码:

                        	<span style="float:left"> <a href="javascript:com.whuang.hsj.scale22(true,'company_module_pic');">放大</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<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