WEB图片放大镜插件V2.0

最新推荐文章于 2023-06-19 00:53:37 发布
最新推荐文章于 2023-06-19 00:53:37 发布
阅读量258 收藏
点赞数
原文链接：https://juejin.im/post/5a910bf85188257a67178951
版权

基于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>
复制代码
效果图

weixin_33708432
关注
学习web app开发，你需要掌握这3个编程语言
在线学习web前端开发教程
12-28 1111
做软件开发，是从事编程开发工作，必须先从语法基础开始学习，通过语法组成产品效果。 前端开发的基础语法，由HTML+CSS+JavaScript组成，这是前端开发最基本的3个语言。 网页布局基础：HTML+CSS HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。 光是HTML做网页，只是有了内容，当然是远...
web前端开发概述
Chen_Wei_Sheng的博客
08-29 2326
复习笔记
web端，点击图片放大插件，便于集成
01-25
web端，点击图片放大插件，便于集成；适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
web 图片放大镜
枫叶的专栏
04-11 232
web 图片放大镜
phpweb 产品模块 放大镜插件
10-08
phpweb 产品模块 放大镜插件 里面有详细的使用说明
网页放大镜插件
03-02
在进行java web 开发的时候，将网页上的图片放大。很实用的。
web 插件版 图片放大镜 实例包 AnythingZoomer jQuery
03-17
web 插件版 图片放大镜 实例包 AnythingZoomer jQuery AnythingZoomer jQuery插件版图片放大镜实例包，和单纯的图片放大还有点不一样，这一个严格来说是放大镜的效果，放大的区域将随着鼠标的移动而移动，而且本插件是完全封装好的jQuery版，使用方法简单，不需要引入太多的外部文件，不少朋友已经在用了。
前端常用插件、工具类库汇总，新手必收藏！！！
BOM485480的博客
04-30 780
前言 在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。_ 可以先加个收藏（Ct...
web前端高级JavaScript - 前端web高级开发知识体系课程大纲
lixiaosenlin的专栏
10-23 5903
堆栈内存和闭包作用域 9种数据类型区别及相互转换 词法解析和变量提升 堆（Heap）栈（stack）内存及垃圾回收机制 JS底层运行机制：EC/AO/VO/GO 作用域（Scope）和作用域链（Scope-chain） 闭包及其两大作用：保存/保护 高阶编程：惰性函数/柯理化函数/compse组合函数 BAT/TMD经典面试题深入剖析 JQuery源码解读【基本骨架】 Lodash源码解读【函数防抖和节流】 面向对象程序设计 全方位剖析面向对象程序设计 构造函数和new底层实现机制
适用于Visual Studio 2005的会话Vizualizer
04-04
安装完成后，在Visual Studio 2005的调试模式下，当你暂停程序执行时，可以在Watch窗口或者QuickWatch窗口中添加一个新的监视表达式，输入`Session`，然后点击旁边的放大镜图标，会话Visualizer就会自动打开，展示...
图片放大镜插件
08-13
图片放大镜插件，鼠标移动到图片放大功能。图片放大镜插件，鼠标移动到图片放大功能。
jQuery之jqzoom(图片放大镜插件)
03-26
NULL 博文链接：https://liuzidong.iteye.com/blog/1152132
jQuery实用产品图片放大镜插件
12-11
bzoom是一款非常实用的jQuery产品图片放大镜插件。该放大镜插件类似于淘宝等商城网站的产品页图片放大镜。可以实现淡入淡出显示图片及图片自动轮播等功能。
图片放大镜插件：jqzoom
04-02
NULL 博文链接：https://chenjumin.iteye.com/blog/1456613
商品图片放大镜插件.zip
07-11
基于jQuery的商品图片放大镜查看效果，带阴影的放大镜查看器代码。
web页面图片放大
IT小浣熊的博客
12-25 3451
文章目录图片放大 方式一图片放大 方式二 图片放大 方式一 借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060 <div class="evidenceImgDiv"> <img src="http://image.baidu.com/search/detail?ct=503316480&z=0&...
图片放大镜 jQuery插件
花花的博客
06-03 947
插件网盘地址用户传参/*使用jqzoom*/$(function(){ $('.jqzoom').jqzoom({ zoomType: 'standard',/*遮罩层样式*/ lens:true,/*鼠标滑入显示遮罩层*/ preloadImages: false,/*预加载*/ alwaysOn:false,/*初始是否显示遮罩层*/ zoomWidth: 340,/*放...
一款很棒的图片放大镜插件
最新发布
2301_76442835的博客
06-19 141
这是一款轻量级的图片放大镜特效，截图这个效果已经是放大了好多倍数了，大家指定这张图片多大尺寸吗，2800px * 1760px 确实不小哈，大家可以查看演示。
提升Web内容可达性：WCAG 2.0全面指南
Web内容无障碍指南（WCAG）2.0是由世界万维网联盟（W3C）于2008年12月11日正式发布的推荐标准，旨在提高网络内容的可访问性，以便所有用户，无论是否具有视觉、听觉、学习、认知、运动或其他形式的残疾，都能顺畅地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值