WEB图片放大镜插件V2.0

基于V1.0版本,新添了左右点击查看。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>PC查看器</title>
</head>
<style>
    *{padding:0;margin: 0;}
    ul li{list-style: none;}
    .page-wrapper{width:1080px;overflow: hidden;margin: 0 auto;}
    .clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0}
    .clearfix{*zoom: 1}
    .hide{display: none;}
    .format{margin:50px 0}
    .check-ul{margin-left:-20px;}
    .check-ul li{float: left;border:1px solid #e5e5e5;height:200px;width:150px;overflow:hidden;margin-left: 20px;cursor: -webkit-zoom-in;}
    .check-ul li img{display: block;height:200px;width:150px;overflow:hidden}
    .checkImg-box .mask{position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.6);width:100%;height:100%;z-index: 2;}
    .check-container{position: absolute;top: 0;left:0;overflow:hidden;background-color: #000;z-index: 3;}
    .check-container img{cursor: -webkit-zoom-in;position: absolute;}
    .r{position:relative}
    #zoomIn_Close{position: absolute;top: 0;right: 0;width:64px;height:64px;z-index: 3;}
    #zoomIn_Left{position: absolute;top: 0;left: 0;width:64px;height:64px;z-index: 3;}
    #zoomIn_Right{position: absolute;top: 0;right: 0;width:64px;height:64px;z-index: 3;}
</style>
<body>
    <div class="page-wrapper">
    	<div class="format">
            <ul class="check-ul" id="check_Ul">
                <li><img src="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" alt="" title=""/></li>
                <li><img src="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" alt="" title=""/></li>
                <li><img src="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg" alt="" title=""/></li>
            </ul>
    	</div>
    </div>
</body>
<script>
window.onload=function(){
let [tag,getTagimg_Val,view_width,view_height,container_width,container_height,setview_Width,setview_Height,zoomIn_scale,disX,disY,l,t,arr_Left,arr_Right,getTagimg_Width,getTagimg_Height]=["","","","","","","","",false,0,0,0,0,"","","",""];
var checkImg={
    init:function(){
    	let box1= document.createElement("div");
    	box1.id = 'swithShow';  
    	box1.className = 'checkImg-box'; 
    	
    	let box2= document.createElement("div"); 
    	box2.className = 'mask'; 
    	
    	let box3= document.createElement("img"); 
    	box3.id = 'zoomIn_Close';  
    	box3.src='img/mask_close.png';
    	
    	let box7= document.createElement("img"); 
    	box7.id = 'zoomIn_Left';  
    	box7.src='img/arrow-left.png';
    	
    	let box8= document.createElement("img"); 
    	box8.id = 'zoomIn_Right';  
    	box8.src='img/arrow-right.png';
    	
    	let box4= document.createElement("div");
    	box4.id = 'check_Container';  
    	box4.className = 'check-container'; 
    	
    	let box5= document.createElement("div");
    	box5.id = 'img_Container';  
    	box5.className = 'r';
    	
    	let box6= document.createElement("img");
    	box6.id = 'zoomIn_Img';  
    	
    	box1.appendChild(box2);
    	box1.appendChild(box3);
    	box1.appendChild(box7);
    	box1.appendChild(box8);
    	box1.appendChild(box4);
    	box4.appendChild(box5);
    	box4.appendChild(box6);
    	document.body.appendChild(box1);
    	
    	/*关闭弹窗*/
    	box3.addEventListener("click",function(){
    	    document.body.removeChild(box1);
    	},false);
    	/*点击图片-放大*/
    	box6.addEventListener("click",function(){
        if(zoomIn_scale===false){
        	zoomIn_Img.style.width=getTagimg_Width+'px';
        	zoomIn_Img.style.height=getTagimg_Height+'px';
        	tag.style.height=getTagimg_Height>container_height?container_height+'px':getTagimg_Height+'px' //限制容器高度
        	zoomIn_Img.style.cursor='-webkit-grab'; //改变鼠标样式
        	zoomIn_scale=true;
        	checkImg.mouseMoveFun(zoomIn_scale); //启动滑动
        }else{
        	zoomIn_Img.style.width=parseInt(setview_Width)+'px'; //恢复初始化宽度
        	tag.style.height=setview_Height;
        	zoomIn_Img.style.height=setview_Height;
        	zoomIn_Img.style.cursor='-webkit-zoom-in';//改变鼠标样式
        	zoomIn_scale=false;
        	checkImg.mouseMoveFun(zoomIn_scale);//启动滑动
        }
        checkImg.setCenter();
    	},false);
    	box7.addEventListener("click",function(){//添加”左“点击事件
            if(tag_flagIndex!=0){
            	tag_flagIndex--;
            	checkImg.setImgSrc(tag_liArr[tag_flagIndex]);
            }else{
            	alert("到尽头了!");
            }
    	},false);
    	box8.addEventListener("click",function(){//添加”右“点击事件
            if(tag_flagIndex<tag_liArr.length-1){
            	tag_flagIndex++;
            	checkImg.setImgSrc(tag_liArr[tag_flagIndex]);
            }else{
            	alert("到尽头了!");
            }
    	},false);
    },
    setImgSrc:function(imgsrc){ //重置图片
    	zoomIn_Img.src =imgsrc;
    	zoomIn_Img.style.width="";
    	zoomIn_Img.style.height="";
    	zoomIn_Img.cursor="-webkit-zoom-in";
    	zoomIn_Img.style.left="0px";
    	zoomIn_Img.style.top="0px";
    	checkImg.count();
    },
    count:function(){
        tag=document.getElementById("check_Container");//获取容器id
        view_width=document.documentElement.clientWidth; //浏览器可见宽度
        view_height=document.documentElement.clientHeight;//浏览器可见高度
        container_width=parseInt(view_width*0.8); //80%*可见宽度
        container_height=parseInt(view_height*0.8);//80%*可见高度
        getTagimg_Val = window.getComputedStyle(zoomIn_Img, null); //获取目标图片属性
        getTagimg_Width=parseInt(getTagimg_Val.width);//图片原始宽度
        getTagimg_Height=parseInt(getTagimg_Val.height);//图片原始高度
        setview_Width=container_width<(getTagimg_Width*0.8)?container_width+'px':(getTagimg_Width*0.8)+'px'; //初始化宽度
        setview_Height=container_height<(getTagimg_Height*0.8)?container_height+'px':(getTagimg_Height*0.8)+'px'; //初始化高度
        tag.style.width=setview_Width;
        tag.style.height=setview_Height;
        zoomIn_Img.style.width=setview_Width;
        zoomIn_Img.style.height=setview_Height;
        arr_Left=document.getElementById("zoomIn_Left");//获取左箭头
        arr_Right=document.getElementById("zoomIn_Right");//获取右箭头
        arr_Left.style.top=(view_height-64)/2+'px';//设置居中
        arr_Right.style.top=(view_height-64)/2+'px';//设置居中
        checkImg.setCenter();
    },
    setCenter:function(){
        let getTag_Val = window.getComputedStyle(tag, null); //获取目标属性
        let getTag_Width=parseInt(getTag_Val.width);//目标宽度
        let getTag_Height=parseInt(getTag_Val.height);//目标高度
        tag.style.left=(view_width-parseInt(getTag_Width))/2+'px';
        tag.style.top=(view_height-parseInt(getTag_Height))/2+'px';
    },
    mouseMoveFun:function(flag){
            if(zoomIn_scale===true){
                zoomIn_Img.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-zoomIn_Img.offsetLeft;
                disY=oEvent.clientY-zoomIn_Img.offsetTop;
                document.onmousemove=function (ev){
                    var oEvent=ev||event;
                    l=oEvent.clientX-disX;
                    t=oEvent.clientY-disY;
                    zoomIn_Img.style.left=l+'px';
                    zoomIn_Img.style.top=t+'px';
                    zoomIn_scale=false;
                };
                document.onmouseup=function (){
                    zoomIn_Img.click=null;
                    var oEvent=ev||event;
                    let count_right=-(getTagimg_Width-parseInt(tag.style.width));
                    let count_bottom=-(getTagimg_Height-parseInt(tag.style.height));
                    if(l>0){
                        zoomIn_Img.style.left='0px';
                    }else if(l<count_right){
                        zoomIn_Img.style.left=count_right+'px';
                    }
                    if(t>0){
                        zoomIn_Img.style.top='0px';
                    }else if(t<count_bottom){
                        zoomIn_Img.style.top=count_bottom+'px';
                    }
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
                return false;
            }
        }else{
            zoomIn_Img.onmousedown=null;
            document.onmousemove=null;
            document.onmouseup=null;
            zoomIn_Img.style.left='0px';
            zoomIn_Img.style.top='0px';
        }
    },
}
    //1.添加图片列表的点击事件
    let tag_ul=document.getElementById("check_Ul");
    let tag_li=tag_ul.getElementsByTagName("li")//获取图片元素集
    let tag_liArr=[];
    let tag_flagIndex=0;
    for(let i=0;i<tag_li.length;i++){
    	tag_liArr.push(tag_li[i].getElementsByTagName("img")[0].src);
    	tag_li[i].onclick=function(){
    		tag_flagIndex=i
    		checkImg.init();
    		checkImg.setImgSrc(tag_li[i].getElementsByTagName("img")[0].src)
    	}
    }
}
</script>
</html>
效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值