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.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");
            }
           
        }

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值