欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js 缩放图片

程序员文章站 2022-07-08 12:06:50
...

使用javascript 如何缩放图片呢?

先看一下效果
js 缩放图片
            
    
    博客分类: javascript imgimage图片缩放js缩放图片scale 
 点击"缩放",效果如下:
js 缩放图片
            
    
    博客分类: javascript imgimage图片缩放js缩放图片scale 
 页面代码:

                        	<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

 

  • js 缩放图片
            
    
    博客分类: javascript imgimage图片缩放js缩放图片scale 
  • 大小: 31.6 KB
  • js 缩放图片
            
    
    博客分类: javascript imgimage图片缩放js缩放图片scale 
  • 大小: 25.1 KB