点击按钮，图片等比例缩放

169 阅读 0 评论 112 点赞

我是靠谱客的博主高贵路人，这篇文章主要介绍点击按钮，图片等比例缩放，现在分享给大家，希望可以做个参考。

实现缩放图片的关键点：
1）图片需要用<img>来引用，图片的宽高不能通过css或内联style来另外设置，不然缩放不起作用。
2）实现缩放效果采用setInterVal()缓慢缩放
3）宽高要同比例缩放
例如：以同比例5%的速度增大
img.width = img.width*1.05;
img.height = img.height*1.05;
4）图片缩放的限制：每次点击时规定缩放的比例，图片总体缩放到一定程度后，限制不能缩放
5）注意释放定时器clearInterval();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .box{
            width:300px;
            margin:0 auto;
            height:auto;
        }
    </style>
    <script>
        window.onload = function(){
            var big = document.getElementById("big");
            var small = document.getElementById("small");
            big.onclick = function(){
                makeBig();
            };
            small.onclick = function(){
                makeSmall();
            };
            var img = document.getElementById("imgdemo");
            //图片最大限度增加到原来的3倍
            var maxW = img.width*3;
            var maxH = img.height*3;
            //图片最大限度缩小到原来的0.5倍
            var minW = img.width*0.5;
            var minH = img.height*0.5;
            //图片放大
            function makeBig(){
                //每次点击后的宽高限于同比例增加50%;
                var clickW = img.width*1.5;
                var clickH = img.height*1.5;
                var timer = setInterval(function(){
                    if(img.width < clickW){//限定宽高增大的程度到每次点击后的宽高的150%
                        if(img.width < maxW){//限定物体能缩放的极限值为maxW
                            //以同比例5%的速度增大
                            img.width = img.width*1.05;
                            img.height = img.height*1.05;
                        }else{
                            alert("亲，图片已放到最大了");
                            clearInterval(timer);
                        }
                    }else{
                        clearInterval(timer);
                    }
                },10);
            }
            //缩小图片
            function makeSmall(){
                //每次点击后的宽高限于同比例增加50%;
                var clickW = img.width*0.5;
                var clickH = img.height*0.5;
                var timer = setInterval(function(){
                    if(img.width > clickW){//限定宽高缩放的程度到每次点击后的宽高的50%
                        if(img.width > minW){//限定物体能缩放的极限值为minW
                            //以同比例5%的速度减小
                            img.width = img.width*0.95;
                            img.height = img.height*0.95;
                        }else{
                            alert("亲，图片已缩到最小了");
                            clearInterval(timer);
                        }
                    }else{
                        clearInterval(timer);
                    }
                },10);
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="img/bg.gif" id="imgdemo"></img>
    <p>
        <input type="button" id="big" value="放大" />
        <input type="button" id="small" value="缩小" />
    </p>
</div>
</body>
</html>