可移动，可放大的图片查看功能

2021-08-28 02:41:21
点击图片查看该图，如果不够清晰可以放大，如果感觉位置不对还可以拖动，当然了，做的还不太好，给ps的放大功能差远了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
.cont { width:450px;}
.cont  img { width:100%; height:auto;}
.mask {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color:rgba(0,0,0,.2);
    top:0; left:0px;
    display:none;
}
.cont_son { width:450px; position:absolute; left:50%; top:50%; margin-left:-225px; margin-top:-100px; background:#fff; padding:10px;  }
.cont_son h3 { font-size:14px; font-weight:normal; text-indent:10px; color:#333; background-color:#ddd; line-height:30px;}
.mask_img img { height:auto;}
.close { width:20px; height:20px; position:absolute; right:15px; top:15px; cursor:pointer;}
</style>
</head>

<body>

<div class="cont" id="cont"><img src="test001.jpg" width="1440" height="900" /></div>
<div class="mask" id="selt" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div class="cont_son" draggable="true"  ondragstart="drag(event)" >
      <h3 >滚动滚轮放大缩小图片</h3>
    <div class="close" id="close">×</div>
    <div class="mask_img" >
      
    </div>
  </div>
</div>

<script>
    var cont = document.getElementById("cont");
    var  selt = document.getElementById("selt");
    var kuang = selt.getElementsByClassName("cont_son")[0];
    cont.addEventListener("click",show);
    
    function show (){
        var maskImg =  selt.getElementsByClassName("mask_img")[0];
        var oldImg = cont.getElementsByTagName("img")[0];
        var hasImg =  maskImg.getElementsByTagName("img")[0];
        if(!hasImg){
        var newImg = oldImg.cloneNode(true);
        newImg.width = 450;
        maskImg.appendChild(newImg);
        }else {
            kuang.removeAttribute("style");
            hasImg.style.width = "450px";    
        }
        selt.style.display = "block ";
        window.addEventListener("mousewheel",panduan);
        
            
    }
    var guanbi = document.getElementById("close");
    guanbi.addEventListener("click",hide);
    
    function hide (){
        selt.style.display = "none ";        
    }
    
    function  panduan (e){
            var t1;
            if(e.wheelDelta){//IE/Opera/Chrome 
                t1 = e.wheelDelta; 
            
            }else if(e.detail){//Firefox 
                t1 =e.detail; 
            } 
            if(t1>0){
                scale(1);
            }
            else {
                scale(0);
            }
            nowx =e.clientX ;
            nowy =e.clientY ;    
    }
    function scale(isUp){
            
            var width = kuang.offsetWidth-20;
            var height = kuang.offsetHeight-20;
            var left = kuang.offsetLeft;
            var top = kuang.offsetTop;
            var ml = parseFloat(getCurrentStyle(kuang).marginLeft);
            var mh = parseFloat(getCurrentStyle(kuang).marginTop);
            if(isUp){
                var Nwidth = width*1.1;
                var Nheight = height*1.1;
                }else {
                var Nwidth = width/1.1;
                var Nheight = height/1.1;
            }
            
            kuang.style.width =  Nwidth+"px";
            kuang.style.marginLeft = (ml-(Nwidth-width)/2) +"px";
            kuang.style.marginTop = (mh-(Nheight-height)/2) +"px";
            var nowImg = kuang.querySelector(".mask_img img");
            nowImg.style.width =  "100%";
            //console.log(height) ;
    }
    


        var nowx , nowy ;
        
        function allowDrop(ev){
            ev.preventDefault();
               
            }
        function drag(ev){
            var dragId = kuang;
            var yuanX =  kuang.offsetLeft ;
            var yuanY =  kuang.offsetTop ;
            nowx =ev.clientX ;
            nowy =ev.clientY ;
            nowx = nowx - yuanX ;
            nowy = nowy - yuanY;
            ev.dataTransfer.setData("Text",dragId);
            ev.dataTransfer.setDragImage(kuang,nowx,nowy);
            }
        function drop(ev){
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            var dX = ev.clientX -nowx;
            var dY = ev.clientY -nowy ;
            var ele = kuang;
            ele.style.left = dX +"px";
            ele.style.top = dY +"px";
            ele.style.marginLeft=  "0px";
            ele.style.marginTop = "0px";
        }
        // 参数node：将要获取其计算样式的元素节点
    function getCurrentStyle(node) {
        var style = null;
        
        if(window.getComputedStyle) {
            style = window.getComputedStyle(node, null);
        }else{
            style = node.currentStyle;
        }
        
        return style;
    }        

    
</script>
</body>
</html>
可移动，可放大的图片查看功能,布布扣,bubuko.com
可移动，可放大的图片查看功能
码农公寓

相关文章
