放大镜（附源码）

最新推荐文章于 2024-05-18 06:08:21 发布
最新推荐文章于 2024-05-18 06:08:21 发布
阅读量132 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63706832/article/details/130547697
版权

 首先是两个显示的盒子的设置

样式部分：

<style>
        .zoomglass{
            position: relative;
        }
        .clear::after
        {
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
            visibility: hidden;
        }
        .carouel-con{
          position: absolute;
          width: 452px;
          height: 58px;
          left:0px;
          top:460px;
        }
        .left,.right{
            width: 22px;
            height: 32px;
            background-image: url(./img/iphone/download-1.png);
            background-position: 0 -54px;
            float: left;
            top:50%;
            transform: translate(0,-50%);
            position: relative;
        }
        .right{
            background-position: -78px 0;
            right:0px;
            position: absolute;
        }
        .carousel{
            float: left;
            width: 380px;
            height: 58px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right:0;
            overflow: hidden;
        }
        .imgcon{
            position: absolute;
            left: 0;
            transition: all 0.5s;
        }
        .imgcon>img{
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 0 9px;
        }
    </style>

 html部分：

<div class="zoomglass clear">
        <div class="mini">
            <div class="mask"></div>
        </div>
        <div class="zoom"></div>
        <div class="carouel-con clear">
            <div class="left"></div>
            <div class="carousel">
                <div class="imgcon">
                    
                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>

js部分：

<script type="module">
        import Utils from "./js/Utils.js";
        var arr=Array(10).fill(1).map((t,i)=>(i+1)+".jpg");
        arr.unshift("10-.jpg");
        arr.unshift("12-.jpg");
        arr.unshift("24-.jpg");
        arr.unshift("25-.jpg");
        arr.unshift("26-.jpg");
        arr.unshift("27-.jpg");
        arr.unshift("28-.jpg");
        arr.unshift("29-.jpg");
        arr.unshift("30-.jpg");
        var first=0;
        const SCALE_1=0.5625,SCALE_2=1.2;
        var list,mini,mask,zoom,imgcon,left,right,prev;
        init();
        function init(){
            mini=document.querySelector(".mini");
            mask=document.querySelector(".mask");
            zoom=document.querySelector(".zoom");
            imgcon=document.querySelector(".imgcon");
            left=document.querySelector(".left");
            right=document.querySelector(".right");
            Utils.loadImage(arr,finishHandler,"./img/iphone")
        }

        function finishHandler(_list){
            list=_list;
          
            imgcon.innerHTML=arr.reduce((v,t)=>v+`<img src='./img/iphone/${t}'>`,"");
            imgcon.style.width=arr.length*76+"px";
            mini.addEventListener("mouseenter",mouseHandler);
            mini.addEventListener("mouseleave",mouseHandler);
            left.addEventListener("click",bnClickHandler);
            right.addEventListener("click",bnClickHandler);
            imgcon.addEventListener("mouseover",iconMouseHandler);
            var evt=new MouseEvent("mouseover",{bubbles:true});
            imgcon.firstElementChild.dispatchEvent(evt);
        }

        function setSize(img){
            Object.assign(mini.style,{
                width:img.width*SCALE_1+"px",
                height:img.height*SCALE_1+"px",
                border:"1px solid #999",
                float:"left",
                position:"relative",
                left:"0px",
                top:"0px",
                backgroundImage:`url(${img.src})`,
                backgroundSize:"100% 100%"
            })
            Object.assign(zoom.style,{
                width:img.width*SCALE_1*SCALE_2+"px",
                height:img.height*SCALE_1*SCALE_2+"px",
                border:"1px solid #999",
                float:"left",
                backgroundImage:`url(${img.src})`,
                display:"none"
            })
            Object.assign(mask.style,{
                width:img.width*(SCALE_1**2)*SCALE_2+"px",
                height:img.height*(SCALE_1**2)*SCALE_2+"px",
                backgroundColor:"#ddcc6666",
                position:"absolute",
                left:"0px",
                top:"0px",
                display:"none"
            })
        }

        function mouseHandler(e){
            if(e.type==="mouseenter"){
                zoom.style.display=mask.style.display="block"
                mini.addEventListener("mousemove",mouseHandler);
            }else if(e.type==="mouseleave"){
                zoom.style.display=mask.style.display="none"
            }else if(e.type==="mousemove"){
                var rect=mini.getBoundingClientRect();
                var x=e.clientX-rect.x-mask.offsetWidth/2;
                var y=e.clientY-rect.y-mask.offsetHeight/2;
                if(x<0) x=0;
                if(y<0) y=0;
                if(x>rect.width-mask.offsetWidth) x=rect.width-mask.offsetWidth;
                if(y>rect.height-mask.offsetHeight) y=rect.height-mask.offsetHeight;
                mask.style.left=x+"px";
                mask.style.top=y+"px";
                zoom.style.backgroundPositionX=-x*(zoom.offsetWidth/mask.offsetWidth)+"px";
                zoom.style.backgroundPositionY=-y*(zoom.offsetWidth/mask.offsetWidth)+"px";
            }
        }

        function bnClickHandler(e){
            if(this===left){
                if(first>=5) first-=5;
                else first=0;
            }else if(this===right){
                if(first+10<=arr.length-1) first+=5;
                else first=arr.length-5;       
            }
            imgcon.style.left=-first*76+"px";
        }

        function iconMouseHandler(e){
            if(e.target.nodeName!=="IMG") return;
            if(prev){
                prev.style.borderColor="transparent"
            }
            prev=e.target;
            prev.style.borderColor="red";
  
           setSize(list[Array.from(imgcon.children).indexOf(e.target)]);
            // mini.style.backgroundImage=zoom.style.backgroundImage=`url(${e.target.src})`;
        }
    </script>

 源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .zoomglass{
            position: relative;
        }
        .clear::after
        {
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
            visibility: hidden;
        }
        .carouel-con{
          position: absolute;
          width: 452px;
          height: 58px;
          left:0px;
          top:460px;
        }
        .left,.right{
            width: 22px;
            height: 32px;
            background-image: url(./img/iphone/download-1.png);
            background-position: 0 -54px;
            float: left;
            top:50%;
            transform: translate(0,-50%);
            position: relative;
        }
        .right{
            background-position: -78px 0;
            right:0px;
            position: absolute;
        }
        .carousel{
            float: left;
            width: 380px;
            height: 58px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right:0;
            overflow: hidden;
        }
        .imgcon{
            position: absolute;
            left: 0;
            transition: all 0.5s;
        }
        .imgcon>img{
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 0 9px;
        }
    </style>
</head>
<body>
   <div class="zoomglass clear">
        <div class="mini">
            <div class="mask"></div>
        </div>
        <div class="zoom"></div>
        <div class="carouel-con clear">
            <div class="left"></div>
            <div class="carousel">
                <div class="imgcon">
                    
                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    <script type="module">
        import Utils from "./js/Utils.js";
        var arr=Array(10).fill(1).map((t,i)=>(i+1)+".jpg");
        arr.unshift("10-.jpg");
        arr.unshift("12-.jpg");
        arr.unshift("24-.jpg");
        arr.unshift("25-.jpg");
        arr.unshift("26-.jpg");
        arr.unshift("27-.jpg");
        arr.unshift("28-.jpg");
        arr.unshift("29-.jpg");
        arr.unshift("30-.jpg");
        var first=0;
        const SCALE_1=0.5625,SCALE_2=1.2;
        var list,mini,mask,zoom,imgcon,left,right,prev;
        init();
        function init(){
            mini=document.querySelector(".mini");
            mask=document.querySelector(".mask");
            zoom=document.querySelector(".zoom");
            imgcon=document.querySelector(".imgcon");
            left=document.querySelector(".left");
            right=document.querySelector(".right");
            Utils.loadImage(arr,finishHandler,"./img/iphone")
        }

        function finishHandler(_list){
            list=_list;
          
            imgcon.innerHTML=arr.reduce((v,t)=>v+`<img src='./img/iphone/${t}'>`,"");
            imgcon.style.width=arr.length*76+"px";
            mini.addEventListener("mouseenter",mouseHandler);
            mini.addEventListener("mouseleave",mouseHandler);
            left.addEventListener("click",bnClickHandler);
            right.addEventListener("click",bnClickHandler);
            imgcon.addEventListener("mouseover",iconMouseHandler);
            var evt=new MouseEvent("mouseover",{bubbles:true});
            imgcon.firstElementChild.dispatchEvent(evt);
        }

        function setSize(img){
            Object.assign(mini.style,{
                width:img.width*SCALE_1+"px",
                height:img.height*SCALE_1+"px",
                border:"1px solid #999",
                float:"left",
                position:"relative",
                left:"0px",
                top:"0px",
                backgroundImage:`url(${img.src})`,
                backgroundSize:"100% 100%"
            })
            Object.assign(zoom.style,{
                width:img.width*SCALE_1*SCALE_2+"px",
                height:img.height*SCALE_1*SCALE_2+"px",
                border:"1px solid #999",
                float:"left",
                backgroundImage:`url(${img.src})`,
                display:"none"
            })
            Object.assign(mask.style,{
                width:img.width*(SCALE_1**2)*SCALE_2+"px",
                height:img.height*(SCALE_1**2)*SCALE_2+"px",
                backgroundColor:"#ddcc6666",
                position:"absolute",
                left:"0px",
                top:"0px",
                display:"none"
            })
        }

        function mouseHandler(e){
            if(e.type==="mouseenter"){
                zoom.style.display=mask.style.display="block"
                mini.addEventListener("mousemove",mouseHandler);
            }else if(e.type==="mouseleave"){
                zoom.style.display=mask.style.display="none"
            }else if(e.type==="mousemove"){
                var rect=mini.getBoundingClientRect();
                var x=e.clientX-rect.x-mask.offsetWidth/2;
                var y=e.clientY-rect.y-mask.offsetHeight/2;
                if(x<0) x=0;
                if(y<0) y=0;
                if(x>rect.width-mask.offsetWidth) x=rect.width-mask.offsetWidth;
                if(y>rect.height-mask.offsetHeight) y=rect.height-mask.offsetHeight;
                mask.style.left=x+"px";
                mask.style.top=y+"px";
                zoom.style.backgroundPositionX=-x*(zoom.offsetWidth/mask.offsetWidth)+"px";
                zoom.style.backgroundPositionY=-y*(zoom.offsetWidth/mask.offsetWidth)+"px";
            }
        }

        function bnClickHandler(e){
            if(this===left){
                if(first>=5) first-=5;
                else first=0;
            }else if(this===right){
                if(first+10<=arr.length-1) first+=5;
                else first=arr.length-5;       
            }
            imgcon.style.left=-first*76+"px";
        }

        function iconMouseHandler(e){
            if(e.target.nodeName!=="IMG") return;
            if(prev){
                prev.style.borderColor="transparent"
            }
            prev=e.target;
            prev.style.borderColor="red";
  
           setSize(list[Array.from(imgcon.children).indexOf(e.target)]);
            // mini.style.backgroundImage=zoom.style.backgroundImage=`url(${e.target.src})`;
        }
    </script>
</body>
</html>

代码里的光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C# 放大镜 附源码
09-10
本应用程序主要介绍用C#.net实现 图形放大原理及其实现过程
js实现放大镜案例源码
m0_59642141的博客
08-19 190
js实现放大镜
android 放大镜功能,Android实现放大镜效果的方法实例（附源码）
weixin_42500963的博客
05-25 741
前言应该有很多用过英语应用的同学都看多一个放大镜的效果，就是选中一段文字后，会有一个放大镜，这个究竟怎么实现的呢，我们今天来分析分析。源码分析public class ShaderView extends View {private final Bitmap bitmap;private final ShapeDrawable drawable;// 放大镜的半径private static fi...
Android放大镜效果另附源码
MarkMingShuai的博客
01-30 624
话不多说先上图 思路：先进行整个屏幕的截图，然后在我们截取下来的图片上进行建材，获取我们手指当前的位置的一个小型图片放到我们的ImageView上，进行缩放处理，其中我们需要注意的是边缘的处理。 上代码： 第一步我们进行截图整个屏幕 /** * @param * @Name 截图逻辑 * @Data 2018/1/30 11:27 * @
淘宝放大镜效果，附源码！
code小生
02-14 204
点击上方“逆锋起笔”，公众号回复编程资源 领取大佬们推荐的学习资料 来源 | https://blog.csdn.net/qlwangcong518/article/details/86...
android 文字放大动画效果,Android实现放大镜效果的方法实例（附源码）
weixin_39841825的博客
05-25 611
前言应该有很多用过英语应用的同学都看多一个放大镜的效果，就是选中一段文字后，会有一个放大镜，这个究竟怎么实现的呢，我们今天来分析分析。源码分析public class ShaderView extends View {private final Bitmap bitmap;private final ShapeDrawable drawable;// 放大镜的半径private static fi...
用JavaScript实现淘宝放大镜的效果，附源码
前端开发博客
02-08 351
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步来源 | https://blog.csdn.net/qlwangcong518/article/details/86497...
js 实现放大镜 (附完整代码)
qq_52501846的博客
04-22 3304
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2024年前端最全用JavaScript实现淘宝放大镜的效果，附源码，三年老前端经验面经
2401_84620100的博客
05-13 1002
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就可以了。
C#实现放大镜（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
03-25 31
C#实现放大镜（附完整源码）
Flash放大镜制作源码.rar
07-10
Flash制作的放大镜特效 附源码，这个放大镜支持鼠标拖动，拖动到哪里，就可放大哪里的图像，里面用有Flash遮罩技术，做起来并不是太难，现在还有源文件可以参考，挺不错的Flash学习资料。
Android实现放大镜效果的方法实例（附源码）
01-04
应该有很多用过英语应用的同学都看多一个放大镜的效果，就是选中一段文字后，会有一个放大镜，这个究竟怎么实现的呢，我们今天来分析分析。 源码分析 public class ShaderView extends View { private final ...
利用javascript实现的三种图片放大镜效果实例（附源码）
10-20
主要介绍了利用javascript实现的几种放大镜效果，很实用一款漂亮的js图片放大镜特效，常见于电商网站上产品页，用来放大展示图片细节，很有实用性，推荐下载学习研究。文中提供了完整的源码供大家下载，需要的朋友...
css sprites如何使用
最新发布
codedadi的博客
05-18 390
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 319
TailwindCSS在vite项目中的安装与使用
CSS碎碎念
◝(⑅•ᴗ•⑅)◜..°♡的博客
05-17 272
碎碎念
css去除复选框默认样式
xiaohua0708day的博客
05-17 121
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
CSS从入门到精通（CSS学习第一天）
m0_49067926的博客
05-17 762
CSS基础选择器（标签选择器、类选择器、id选择器、通配符选择器）、CSS字体属性、CSS文本属性
计算机毕业设计附源码
10-03
计算机毕业设计的附源码是指在计算机专业毕业设计中，除了毕业论文之外，还需要提交相应的源代码作为设计成果的一部分。在设计源码时，需要遵循职责分离原则，确保系统的独立性，即每个系统之间互不干预，不能混乱...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值