1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         #middle {
  8.             width: 400px;
  9.             height: 400px;
  10.             position: absolute;
  11.             top : 50px;
  12.             left : 100px;
  13.             border: 1px solid;
  14.         }
  16.         #middle img {
  17.             width: 400px;
  18.             height: 400px;
  19.         }
  21.         #len {
  22.             width: 200px;
  23.             height: 200px;
  24.             background: #f00;
  25.             position: absolute;
  26.             top: 0;
  27.             left: 0;
  28.             opacity: 0.5;
  29.             display: none;
  30.         }
  32.         #big {
  33.             width: 400px;
  34.             height: 400px;
  35.             position: absolute;
  36.             top : 50px;
  37.             left : 520px;
  38.             border:1px solid;
  39.             overflow: hidden;
  40.             display: none;
  41.         }
  42.         #big img {
  43.             width: 800px;
  44.             height: 800px;
  45.             position: absolute;
  46.             top : 0;
  47.             left : 0;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div id="middle">
  53.         <img src="data:images/middle.jpg">
  54.         <div id="len"></div>
  55.     </div>
  57.     <div id="big">
  58.         <img src="data:images/big.jpg" id="big_img">
  59.     </div>
  61.     <script src="js/tools.js"></script>
  62.     <script>
  63.         /* 鼠标移入/移出 div#middle */
  64.         $("#middle").onmouseenter = function(){
  65.             $("#len").style.display = "block";
  66.             $("#big").style.display = "block";
  67.         }
  68.         $("#middle").onmouseleave = function(){
  69.             $("#len").style.display = "none";
  70.             $("#big").style.display = "none";
  71.         }
  73.         // 求 div#middle 元素在文档中定位
  74.         var middleOffset = offset($("#middle"));
  76.         /* 鼠标在 div#middle 上移动 */
  77.         $("#middle").onmousemove = function(e){
  78.             // 镜头坐标
  79.             var _top = e.pageY - middleOffset.top - 100,
  80.                 _left = e.pageX - middleOffset.left - 100;
  81.             // 判断镜头是否在div#middle中图范围内移动
  82.             if (_top < 0)
  83.                 _top = 0;
  84.             else if (_top > 200)
  85.                 _top = 200;
  86.             if (_left < 0)
  87.                 _left = 0;
  88.             else if (_left > 200)
  89.                 _left = 200;

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599333

JavaScript写放大镜效果的更多相关文章

  1. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  2. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  3. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  4. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  6. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  8. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  9. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

随机推荐

  1. kubectl scale 一次缩容调整过程

    查看master环境相关信息一.版本信息 [root@master-web-38 ~]# kubectl versionClient Version: version.Info{Major:" ...

  2. 小程序已成为超级APP必选项，逐鹿私域“留量”

    截止2021年底,中国移动互联网月活跃用规模达到11.74亿人,增速逐渐呈放缓趋势,用户渗透率接近天花板.客户的增长速度越趋于平缓,品牌在不同成长阶段也要适应增长节奏的变化,越来越多主流商家不得不利用 ...

  3. JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了

    JDBC 4.0 开始Java操作数据库不用再使用 Class.forName加载驱动类了 代码示例 转自 https://docs.oracle.com/javase/tutorial/jdbc/o ...

  4. Machine Learning 学习笔记 01 Typora、配置OSS、导论

    Typora 安装与使用. Typora插件. OSS图床配置. 机器学习导论. 机器学习的基本思路. 机器学习实操的7个步骤

  5. uniapp报错：Browserslist: caniuse-lite is outdated. Please run next command `npm update`

    uni-app的编译器是基于npm的,依赖了众多包括mpvue.webpack在内的npm库,这些库又引用了一个三方库caniuser-lite.caniuser-lite这个库的代码里有个浏览器兼容 ...

  6. 2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空)

    2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空) https://www.luogu.com.cn/problem/P2328 题意: 输出n位B进制的格雷码. 分析: ...

  7. 2021.08.06 P2441 角色属性树（树形结构）

    2021.08.06 P2441 角色属性树(树形结构) P2441 角色属性树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 求离x最近的祖先y且(x,y)>1. ...

  8. python数据可视化-matplotlib入门(7)-从网络加载数据及数据可视化的小总结

    除了从文件加载数据,另一个数据源是互联网,互联网每天产生各种不同的数据,可以用各种各样的方式从互联网加载数据. 一.了解 Web API Web 应用编程接口(API)自动请求网站的特定信息,再对这些 ...

  9. Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    错误描述 在DBeaver执行DDL语句时报错:SQL 错误 [1293] [HY000]: Incorrect table definition; there can be only one TIM ...

  10. IT人的修炼之路

    前言 计算机技术更新迭代的速度太快了,作为ITer每天除了面对工作,就要学习新技术,自己的感觉是一直在为技术疲于奔命,直到现在,也不敢放缓脚步.程序员每天必须抽出一定时间学习新技术,避免被淘汰. 1. ...