HTML中，图片放大与缩小

最近做了个对页面的图片进行缩放的项目，故记录下

首先，图片是通过上传得到，图片的width和height并不固定，其次，图片的图层上方有拖拽过来的点，图像缩放时，需要同时对点的坐标进行缩放。

<div class="MapShow" id="PointBox" onmousewheel="return bbimg(this)">
<img id="ImgMap" src="">
</div>

1：通过Button来放大，缩小

在页面定义两个Button，一个放大，一个缩小。两者原理相同，只贴放大的就可以了

 // 放大，每点击一次，放大120%
        function Big() {
         //获取图片width，heigth，
           var width1 = $("#ImgMap").width() * 1.2;
           var height1 = $("#ImgMap").height() * 1.2;
         //修改width，heigth
            $("#ImgMap").attr("width", width1);
          $("#ImgMap").attr("height", height1);
           //获取所有点，所有点的class为MapPoint
           var lstMapPoint = $(".MapPoint");
          var i = 0;
           var x1, x2, y1, y2;
            //遍历,修改样式
          for (i = 0; i < lstMapPoint.length; i++) {
              x1 = $($(".MapPoint").eq(i)).css("left");//eq的索引从0开始
               y1 = $($(".MapPoint").eq(i)).css("top");
               $(".MapPoint").eq(i).css("left", parseInt(x1) * 1.2);
              $(".MapPoint").eq(i).css("top", parseInt(y1) * 1.2);
           }
     }

2 通过鼠标滑轮

通过鼠标滚轮的滑动来改变整个页面的大小，但是这种方式是整个图片都会被放大，包括点的大小，故弃用

<div class="MapShow" id="PointBox" onmousewheel="return bbimg(this)">
<img id="ImgMap" src="">
</div>

给MapShow设置一个鼠标滚轮时间，如果放到下一个div中，只会改变图片，不会改变点的位置

        //滑轮缩放

        function bbimg(o) {

            var zoom = parseInt(o.style.zoom, 10) || 100;

            zoom += event.wheelDelta / 12;

            if (zoom > 0) {

                o.style.zoom = zoom + '%';

            }

            return false;

        }

3 通过下拉框选择百分比

这种方式可能会比较好看，但是实现的话有两种情况，（1）在每次变换后的图片基础上进行缩放，（2）在最原始的图片上进行缩放

参照word文档，VS的做法，选择第二种，故需要设置全局变量记录一些参数，但第一种方式简单

下拉框的代码

 <select class="form-control " id="Part" name="Part" onchange="Change()">

                <option id="select" selected="selected" value=""></option>

                <option value="1">20%</option>

                <option value="2">50%</option>

                <option value="3">70%</option>

                <option value="4">100%</option>

                <option value="5">150%</option>

                <option value="6">200%</option>

                <option value="7">300%</option>

                <option value="8">400%</option>

            </select>

（1）第一种选择

        function Change() {

            var v = $("#Part option:selected").text();

                width = $("#ImgMap").width();

                height = $("#ImgMap").height();

            var lstMapPoint = $(".MapPoint");

            width1 = width * newv;

            height1 = height * newv;

            $("img").attr("width", width1);

            $("img").attr("height", height1);

            var i;

            var x1, x2, y1, y2;

            for (i = 0; i < lstMapPoint.length; i++) {

                x1 = lstMapPoint.eq(i).css("left");

                y1 = lstMapPoint
4000
.eq(i).css("top");

                lstMapPoint.eq(i).css("left",( (parseInt(x1) +20) * StatusChange-20)+"px");  //因为点是圆形，以圆心坐标进行缩放，不会发生坐标偏移问题

                lstMapPoint.eq(i).css("top", ((parseInt(y1) + 20) * StatusChange - 20) + "px");

            }

           

        }

（2）第二种选择

       var y = false;//设置y，使变量只进行一次赋值，即记录初始width，height

        var width = 0;

        var height = 0;

        var StatusChange = 1;//当前缩放比例与上一次比例的比值

        var Status = 0;//上一次的比例

        var newv = 1;//本次比例

        function Change() {

            var v = $("#Part option:selected").text();

            Status = newv;

            newv = v.replace(/%/, "");//当前比例

            newv = newv / 100;

            //alert(Status);

            StatusChange = newv / Status;//当前与上一次的比值

            if (y == false) {

                width = $("#ImgMap").width();

                height = $("#ImgMap").height();

                y = true;

            }

            var lstMapPoint = $(".MapPoint");

            width1 = width * newv;

            height1 = height * newv;

            $("img").attr("width", width1);

            $("img").attr("height", height1);

            var i;

            var x1, x2, y1, y2;

            for (i = 0; i < lstMapPoint.length; i++) {

                x1 = lstMapPoint.eq(i).css("left");//x1，y1的值为**px，必须转换为int形式

                y1 = lstMapPoint.eq(i).css("top");

                lstMapPoint.eq(i).css("left",( (parseInt(x1) +20) * StatusChange-20)+"px");

                lstMapPoint.eq(i).css("top", ((parseInt(y1) + 20) * StatusChange - 20) + "px");

            }

           

        }

总结：最终选择了第三种方式，同时为了更加人性化，选择了第三种里面的第二种；

下一章，将会对画布上的图片进行缩放，同时，因为画布上有把点；连接起来的箭头，需要修改画箭头的部分。