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

最新推荐文章于 2022-12-28 16:05:04 发布

weixin_44389107

最新推荐文章于 2022-12-28 16:05:04 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_44389107/article/details/86563504

版权

实现缩放图片的关键点：
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>

weixin_44389107

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
点击按钮，图片等比例缩放

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

扫一扫