原生JS实现放大镜功能

最新推荐文章于 2024-02-22 12:31:34 发布
最新推荐文章于 2024-02-22 12:31:34 发布
阅读量474 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sushi18257/article/details/83023519
版权

所有源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #box{
        position:relative;
        }
    .small_pic{
        width:360px;
        height:500px;
        }
    .small_pic img{
        width:100%;
        height:100%;
        }
    .small_pic .slider{
        width:180px;
        height:250px;
        position:absolute;
        background:rgba(255,255,255,.3);
        cursor:move;
        display:none;
        }
    .big_pic{
        position:absolute;
        width:360px;
        height:500px;
        top:0;
        left:370px;
        overflow:hidden;
        border:1px solid;
        display:none;
        }
        .big_pic img{
        position:absolute;    
        }
</style>
</head>

<body>


<div id="box">
   <!--左侧-->
   <div class="small_pic">
      <!--滑块-->
      <span class="slider"></span>
      <!--图片-->
      <img src="img/275564f1676186d59.jpg"/>
   </div>
   <!--右侧-->
   <div class="big_pic">
      <!--图片-->
      <img src="img/275564f1676186d59.jpg" width="720" height="1000"/>
   </div>
</div>

 


<script>
     window.onload = function(){
         var box = document.getElementById("box");  //box
         var smallPic = document.getElementsByClassName("small_pic")[0]; //左侧小图片
         var slider = document.getElementsByClassName("slider")[0]; //滑块
         var bigPic = document.getElementsByClassName("big_pic")[0]; //右侧大图片
         var bigImg = bigPic.getElementsByTagName('img')[0];


         // 移出
         smallPic.onmouseout = function(){
             slider.style.display='none';
             bigPic.style.display='none';
             }
             
             
         // 移入
         smallPic.onmousemove = function(event){
             slider.style.display='block';
             bigPic.style.display='block';
             //event.clientX 当前移入点与X轴的距离    slider.offsetWidth/2 滑块的宽度的一半
             var left = event.clientX-slider.offsetWidth/2;
             var top = event.clientY-slider.offsetHeight/2;
             //最大移动范围
             if(left < 0){
                 left = 0;
                 }else if(left > smallPic.offsetWidth - slider.offsetWidth){
                 left = smallPic.offsetWidth - slider.offsetWidth;     
                     };
             if(top < 0){
                 top = 0;
                 }else if(top > smallPic.offsetHeight - slider.offsetHeight){
                 top = smallPic.offsetHeight - slider.offsetHeight;     
                     };
             slider.style.left = left+'px';
             slider.style.top = top+'px';
             bigImg.style.left = -(left+left)+'px'
             bigImg.style.top = -(top+top)+'px'
             }
         
         }
</script>
</body>
</html>

 

 

效果图：

sushi18257
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现放大镜特效
越陌度阡
07-27 537
分享一个用原生JS实现的放大镜效果，效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>原生JS实现放大镜特效</title> <style> * { .........
原生js实现放大镜效果
10-20
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 4206
JavaScript实现的放大镜效果
用原生js实现放大镜功能
le__seul的博客
05-03 610
html： 由于样式简单，所以将css样式内嵌于html <title>放大镜</title> <style type="text/css"> .small{ width:350px; height:350px; border:1px solid #999; float:left; position:relative; ...
原生JS 实现放大镜功能
cc的博客
09-27 286
总体三个元素的css样式： 小图片 （wrap）插入img 镜片（box）插入背景图 大图片（big）插入背景图 <style> * { margin: 0; padding: 0; } .box { displa...
html+css+原生js实现放大镜功能
HHyuang的博客
12-14 608
html+css+js实现放大镜功能一.放大镜效果展示二. html代码三. CSS代码四. js代码 一.放大镜效果展示 1.简单的放大镜功能 二. html代码 1.简单的html代码就不解释了，如果有什么不懂的可以评论或者私聊我，我为你解答。 <div class="box" id="box"> <div class="small" id="small"> <img src="images/small.jpg" width=
使用原生JS实现放大镜功能
y4297的博客
08-22 494
github地址 : https://github.com/yYohao/JSDemo 效果如下图所示：   1.HTML布局        布局采用一个大的div和三个子div，大div大小和左上角有边框的div相等，定义最大div的id为box，有边框的div为smallbox,右边大图的div为bigbox，下面三张图片的整体div为list.(下面以id指代各个div)。sma...
原生JS实现放大镜效果
weixin_42678796的博客
07-19 229
效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
原生JS实现图片放大镜效果
qq_53593492的博客
02-22 351
本文使用原生JavaScript实现图片的放大镜效果
原生js实现放大镜
qq_42736234的博客
01-28 159
思路： 1、移入移出事件：移入目标盒子出现放大镜盒子和遮罩层盒子 2、Tab切换：点击下面列表选项切换目标盒子内容 3、鼠标移动： （1）拖拽和边界判定：用鼠标移动遮罩层盒子位置 （2）调整放大镜盒子背景图片大小，使背景图片移动位置与遮罩层盒子移动位置成比例 效果： 一、css和html <div id="wrap"> <section> ...
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生JS实现简单放大镜效果
10-20
主要为大家详细介绍了原生JS实现简单放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生javascript实现图片放大镜效果
10-20
主要为大家详细介绍了原生javascript实现图片放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
用原生js写个放大镜功能
03-22
好的，以下是一个简单的原生JS实现放大镜功能的代码： HTML： ``` <div class="magnifier"></div> ``` CSS： ``` .container { position: relative; } .magnifier { position: absolute; width: 200px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值