【杂谈】如何用js掌握图片放大减少

2019-11-18杂谈搜奇网41°c

A⁺ A^-

js掌握图片放大减少的结果，能够经由过程JavaScript的width和height属性来完成。其属性能够完成按比例放大和减少图象尺寸的功用。

引荐参考：《JavaScript教程》

在前面的文章中，也为人人引见了JS猎取图片当前宽高和JS猎取图片原始宽高的要领，须要的朋侪能够参考进修。

下面我们就连系细致的代码示例，给人人引见js掌握图片放大减少的要领。

代码示例以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js掌握图片放大减少的示例</title>
    <style type="text/css">
 button{
            padding: 3px 6px;
 }
        button img{
            vertical-align: middle;
 }
    </style>
    <script type="text/javascript">
 function zoomin(){
            var myImg = document.getElementById("sky");
            var currWidth = myImg.clientWidth;
            if(currWidth == 500){
                alert("已到达最大尺寸.");
 } else{
                myImg.style.width = (currWidth + 50) + "px";
 }
        }
        function zoomout(){
            var myImg = document.getElementById("sky");
            var currWidth = myImg.clientWidth;
            if(currWidth == 50){
                alert("已到达最小尺寸.");
} else{
                myImg.style.width = (currWidth - 50) + "px";
 }
        }
    </script>
</head>
<body>
<p>
    <button type="button" onclick="zoomin()"> 放大</button>
    <button type="button" onclick="zoomout()"> 减少</button>
</p>
<img src="./1.png" id="sky" style="width: 250px;">
</body>
</html>

当点击放大按钮时，就会挪用zoomin()要领。起首经由过程document.getElementById要领猎取指定图片元素，并经由过程clientWidth属性猎取图片当前宽度。假如图片当前宽度即是500，则提醒"已到达最大尺寸."，不然每点击放大按钮就在图片当前宽度上再加50px。

当点击减少按钮时，就会挪用zoomout()要领，一样猎取指定图片元素后，经由过程if推断，假如当前宽度即是50，则提醒"已到达最小尺寸."，不然每点击减少按钮就会使当图片前宽度再减去50px。高度均为自适应。

终究结果以下图所示：