5.放大镜

最新推荐文章于 2023-12-07 14:59:16 发布
最新推荐文章于 2023-12-07 14:59:16 发布
阅读量163 收藏
点赞数
分类专栏： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehangongzi/article/details/80467392
版权
要实现这样的效果，当鼠标在左边的区域滑动时，有一个小遮罩层跟着鼠标移动，且右边的区域显示左边区域的放大效果

image.png
用一张小图和一张大图做，这样不会失真

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #small{
            position: relative;
            width: 257px;
            height: 238px;
        }
        #drag{
            width: 100px;
            height: 100px;
            background: #ccc;
            opacity: 0.6;
            filter:alpha(opacity = 60);
            position: absolute;
            left:0;
            top:0;
            display:none;
        }
        #big{
            width: 257px;
            height: 238px;
            position: absolute;
            left: 257px;
            top: 0px;
           overflow:hidden; /*不写这一句的话，大图就会溢出他的父元素的范围*/
            display : none;
        }
    </style>
</head>
<body>
    <div id="small">
        <img src="img/nanshen1.png" alt="">
        <div id="drag"></div>
    </div>
    <div id="big">
        <img src="img/nanshen2.png" alt="">
    </div>
    <script>
        var oSmall = document.getElementById("small");
        var oDrag = document.getElementById("drag");
        var oBig = document.getElementById("big");
        oSmall.onmouseover = function(){
            oDrag.style.display = "block";
            oBig.style.display = "block";
        }
        oSmall.onmouseout = function(){
            oDrag.style.display = "none";
            oBig.style.display = "none";
        }
        oSmall.onmousemove = function(e){
            oDrag.style.left = e.clientX- oDrag.offsetWidth/2 + "px";
            oDrag.style.top = e.clientY -oDrag.offsetHeight/2 +"px";
        }

    </script>
</body>
</html>
现在的状况是，小遮罩层跟着鼠标跑，离开左边的小图区域了也不分开

image.png

那么怎么能让小遮罩层一直保持在small区域里面,不跟着鼠标走呢？

image.png

现在左边完成了，那么右边的大图怎么定位呢

要知道大图和小图的比例就行了，小图移动多少，大图移动他的倍数
image.png

但是现在又出问题了，在IE下，当小遮罩层离开或进入small的临界点时，小滑块跳动的厉害，难道是白边的原因？

image.png

应该不是白边的问题，那么怎么解决嘞

image.png

到此，放大镜就完成了，成功把帅气的欧巴变大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #small{
            position: relative;
            width: 257px;
            height: 238px;
        }
        #drag{
            width: 100px;
            height: 100px;
            background: #ccc;
            opacity: 0.6;
            filter:alpha(opacity = 60);
            position: absolute;
            left:0;
            top:0;
            display:none;
        }
        #big{
            width: 257px;
            height: 238px;
            position: absolute;
            left: 257px;
            top: 0px;
           overflow:hidden; /*不写这一句的话，大图就会溢出他的父元素的范围*/
            display : none;
        }
        #big-img{
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="small">
        <img src="img/nanshen1.png" alt="">
        <div id="drag"></div>
    </div>
    <div id="big">
        <img  id="big-img" src="img/nanshen2.png" alt="">
    </div>
    <script>
        var oSmall = document.getElementById("small");
        var oDrag = document.getElementById("drag");
        var oBig = document.getElementById("big");
        var oBigImg = document.getElementById("big-img");
        oSmall.onmouseover = function(){
            oDrag.style.display = "block";
            oBig.style.display = "block";
            oSmall.onmousemove();          //加上这句就不抖动了
        }
        oSmall.onmouseout = function(){
            oDrag.style.display = "none";
            oBig.style.display = "none";
        }
        oSmall.onmousemove = function(e){
            e = e|| window.event
            var iLeft = e.clientX- oDrag.offsetWidth/2;
            var iTop = e.clientY -oDrag.offsetHeight/2;
            var xMax = oSmall.offsetWidth - oDrag.offsetWidth;
            var yMax = oSmall.offsetWidth -oDrag.offsetWidth;
            if(iLeft<0){
                iLeft = 0;
            }
            if(iTop<0){
                iTop = 0;
            }
            if(iLeft>xMax){
                iLeft = xMax;
            }
            if(iTop>yMax){
                iTop = yMax;
            }
            oDrag.style.left = iLeft + "px";
            oDrag.style.top = iTop +"px";
            oBigImg.style.left = -iLeft*(oBigImg.offsetWidth/oSmall.offsetWidth) +"px";
            oBigImg.style.top = -iTop*(oBigImg.offsetHeight/oSmall.offsetHeight) +"px";

        }

    </script>
</body>
</html>

放大镜.gif

李天下xue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
放大镜.zip
09-02
简单实现放大镜的功能 -
Js放大镜抖动问题
s2974240889的博客
08-09 533
js 的执行机制是从上到下的，我们在给小图片做mouseomve事件的时候，当鼠标移动到mask遮挡层的时候会消失因为给小图片上边做的事件，这样就会出现盒子有时候有有时候没有的，给小图片和Mask一个大盒子在做点击事件就可以了 ...
Qt实现放大镜功能
Pailugou的博客
09-01 995
【代码】Qt实现区域放大镜功能。目前主要实现的是整个屏幕鼠标当前位置进行放大，获取当前鼠标位置，将其截取到，进行放大显示处理
Qt中用halcon做出的放大镜效果
lidengfeng0ff的专栏
09-29 1086
本来想设计一个像QQ截图里面的放大镜一样的效果，网上搜索半天得到的资料都不尽人意，所以调整了方案在窗口中动态插入一个Qlabel控件，用这个控件来处理图像，代码中也结合了网上的资源处理步骤如下： 1、插入Qlabel控件，让控件置顶，位置根据父控件自动调整，大小不变； QLabel *showManger; showManger = new QLabel(ui.page_g...
QT放大镜效果预览
最新发布
wxi_Carol的博客
12-07 483
放大镜
Qt放大镜(一)
zhaominyong的专栏
01-20 1549
版权声明：转载自Qt放大镜代码设计_onlyshi的专栏-CSDN博客 放大镜代码设计 一、起因 看到自己手机T1上面的那个搜索app的图标是个放大镜，但是锤子科技把它真正做成了也具有放大镜的功能。 由于自己刚学Qt，所以也想在电脑上试一下做一个放大镜的小玩意。但是思路有限，对Qt掌握也不是非常好，就很的简单做了一个，提供些思路给有需要的人，但是，做的还不够精细，不够好，希望以后随着对Qt的掌握程度的加深后，会重新做一个更好的。 看看做完之后的效果对比图。 二、代码实现 1、实.
HTML5 商品放大镜效果
07-31
Day3_Magnifier.zip　HTML5 商品放大镜效果
H5+JS+CSS模仿JD商品详情页放大镜效果
12-06
适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果，可以熟练掌握鼠标经过和鼠标移动事件
h5商品放大镜
06-12
淘宝京东的商品放大镜 新手容易看懂的资源
jQuery实现放大镜效果
02-03
1、实现原理2、mousemove事件3、相对坐标4、background-position属性5、mousewheel事件首先，我们讲解一下放大镜效果的实现方式：方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。...
qt-magnification-glass-widget:Qt4/5 的放大镜 Widget-开源
06-01
Qt4/5 的放大镜小部件是一个源代码，您可以将其添加到您的项目中以拥有一个小窗口，该小窗口向您显示图形小部件（QWidget、QLabel 等）的“缩放”区域。 缩放区域子窗口围绕鼠标指针（指针位于子窗口的中间）。 您可以移动它来改变查看区域，您可以进一步放大或缩小。 可以调用或附加到信号/插槽（当然也可以使用较少的适应进行子类化）。 当前的演示代码在鼠标右键单击时调用它，直到您再次释放按钮，缩放是通过鼠标滚轮进行的。
Qt制作的屏幕放大器
12-07
使用Qt编写的屏幕放大器。使用Qt本身的机制，制作的一个的能够将所在局域放大1.5倍的屏幕放大器，以有利于阅读或学习使用。
Qt放大镜代码设计
10-09
基于Qt5开发的放大镜设计，用纯代码实现，非常有意思。实现思路：先实现截取整个屏幕成pixmap，然后获得鼠标位置坐标，截取pixmap中鼠标位置的40x40的像素，然后放大3倍，截取的区域设置成画刷，在鼠标位置处120x120矩形中画出一个椭圆，其实就是一个圆。这样就ok了，点击左键退出应用。
Qt放大镜源码
03-26
Qt放大镜源码
Qt 放大镜源代码
03-26
Qt 放大镜源代码
Qt实现屏幕取色器 (放大镜，RGB显示，智能调节）原理
zhaominyong的专栏
01-20 1093
运行效果： 原理： 首先给整个屏幕覆盖上一层高透明度的无边框窗口(这里我用的颜色为（255，255，255），且透明度为1 (【0,255】）) 通过定时器或线程实时更新鼠标位置，注意不要使用鼠标移动事件，如果通过鼠标移动来触发取色无法对动态视频取色 通过截图函数，对整个窗口进行截图，其中选择以鼠标为中心的一块矩形，我选取的大小是10*7，而放大镜是100*70，故放大倍数为10，将这部分矩形图形放在放大镜中，且选取鼠标所在位置的像素颜色。 ...
Qt放大镜（二）
zhaominyong的专栏
01-24 792
来自Qt本身的样例文档。 演示如何操作QPainterPath中的元素。 我们定义一个透镜形状的矢量变形场，并将其应用于路径上的所有点。这意味着在屏幕上呈现的不是像素操作，而是符号本身的修改矢量表示。从变形字形的高质量的反锯齿边缘可以看出这一点。 为了获得一个相当复杂的路径，我们允许用户输入文本并将文本转换为路径。这是使用QPainterPath::addText()函数完成的。 镜头是通过调用QPainter::drawEllipse()绘制的，使用QRadialGradient填充一个.
jquery 放大镜
09-16
5. 获取计算出的图片区域，并在放大镜窗口中显示对应区域的放大图。 6. 根据鼠标的位置，调整放大镜窗口的位置，使其跟随鼠标移动。 7. 最后，通过CSS样式，设置放大镜窗口的背景图为放大图，并调整其尺寸，以实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值