天天看点

js 缩放图片

先看一下效果

js 缩放图片

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

js 缩放图片

 页面代码:

js 缩放图片

                            <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 的实现:

js 缩放图片

/*** 

* 缩放图片 

*/  

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){  

    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;  

};  

 依赖的方法:

js 缩放图片

/******************************************************************************* 

 * 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] ??  

            }  

            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 true;  

 * is whitespace entirely 

 *            inputstring 

com.whuang.hsj.iswholewhitespace = function(inputstring) {  

    if (typeof inputstring == "object") {  

        return inputstring;  

    var bootinit = true;  

    if (inputstring == "" || inputstring == undefined) {  

    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

继续阅读