上例图：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .box {

             width: 350px;

             height: 467px;

             margin: 100px;

             border: 1px solid #ccc;

             position: relative;

             /*overflow: hidden;*/

         }

         .big {

             width: 400px;

             height: 400px;

             position: absolute;

             top: 0;

             left: 360px;

             border: 1px solid #ccc;

             overflow: hidden;

             /*display: none;*/

             opacity: 0.1;

             z-index: -1;

             /*transform: translateX(-500px) scale(0);*/

             transition: all .4s;

         }

         .mask {

             width: 175px;

             height: 175px;

             background: rgba(255, 255, 0, 0.4);

             position: absolute;

             top: 0px;

             left: 0px;

             cursor: move;

             display: none;

         }

         .small {

             position: relative;

         }

         .box:hover .mask{

             display: block;

         }

         .box:hover .big{

             transform: translateX(0px)  scale(1);

             opacity: 1;

             z-index: 1;

             /*display: block;*/

         }

     </style>

 </head>

 <body>

 <div class="box" id="box">

     <div class="small"><!--小层-->

         <img src="img/small2.jpg" width="350" alt=""/>

         <div class="mask" id="mask"></div><!--遮挡层-->

     </div>

     <div class="big" id="big"><!--大层-->

         <img src="img/big2.jpg" width="800" alt=""/><!--大图-->

     </div>

 </div>

 </body>

 </html>

 <script>

     /*以下注释的代码用CSS代替了*/

 //    var box = document.getElementById("box");

 //    var mask = document.getElementById("mask");

 //    var big = document.getElementById("big");

 //    box.onmouseover = function () {

 //        mask.style.display = "block";

 //        big.style.display = "block";

 //    }

 //    box.onmouseout = function () {

 //        mask.style.display = "none";

 //        big.style.display = "none";

 //    }

     /**

      * 1.鼠标移上大分区，遮罩层和大图显示

      * 2.鼠标移出大分区，遮罩层和大图隐藏

      * 3.鼠标在大分区内移动的时候，遮罩层跟鼠标移动，大图也跟着移动

      * */

     var box = document.getElementById("box");

     var mask = document.getElementById("mask");

     var bigImg = document.getElementById("big").children[0];

     box.onmousemove = function (event) {

         var pageX = event.pageX;

         var pageY = event.pageY;

         // 数据有了，我们希望盒子跟着鼠标走

         // 由于盒子是绝对定位，所以基于页面获取到的坐标要做处理

         // 目标数据 = 鼠标在页面的坐标 - 大盒子距离页面的坐标

         var boxOffsetLeft =  box.offsetLeft ;

         var boxOffsetTop =  box.offsetTop;

         var boxOffsetWidth = box.offsetWidth;

         var boxOffsetHeight =  box.offsetHeight;

         var maskOffsetWidth = mask.offsetWidth;

         var maskOffseetHeight = mask.offsetHeight;

         // 让鼠标在mask盒子中心拖拽移动

         var mX = pageX - boxOffsetLeft -maskOffsetWidth/2;

         var mY = pageY - boxOffsetTop  - maskOffseetHeight/2;

         // 以下判断mask盒子是否越出父盒子

         if(mX < 0) {

             mX = 0 ;

         }

         if(mY < 0) {

             mY = 0 ;

         }

         if(mX > boxOffsetWidth - maskOffsetWidth) {

             mX = boxOffsetWidth -maskOffsetWidth;

         }

         if(mY > boxOffsetHeight - maskOffseetHeight) {

             mY = boxOffsetHeight - maskOffseetHeight;

         }

         // 设置mask盒子位置

         mask.style.left = mX + "px";

         mask.style.top = mY + "px";

         // 获取比例设置大图等比例的位置

         var bili = bigImg.offsetWidth/boxOffsetWidth;

         bigImg.style.marginLeft = -mX*bili + "px";

         bigImg.style.marginTop = -mY*bili + "px";

     }

 </script>

JavaScript--放大镜的更多相关文章

  1. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  2. JavaScript之放大镜效果

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

  3. 【JavaScript】放大镜效果

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

  4. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  5. JavaScript之放大镜效果2

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

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

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

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

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

  8. javascript 实现图片放大镜功能

    淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...

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

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

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

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

随机推荐

  1. Django项目：CRM(客户关系管理系统)--63--53PerfectCRM实现CRM客户报名流程缴费

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  2. 深入浅出 Java Concurrency (17): 并发容器 part 2 ConcurrentMap (2)[转]

    本来想比较全面和深入的谈谈ConcurrentHashMap的,发现网上有很多对HashMap和ConcurrentHashMap分析的文章,因此本小节尽可能的分析其中的细节,少一点理论的东西,多谈谈 ...

  3. C# 利用Newtonsoft.Json 序列化生成Json数据

    现在需要将一些数据转化成json格式返回给调用者, 使用Newtonsoft.Json.DLL库来帮助我们序列化 举例: {"300033":{"MC":&qu ...

  4. html css javascript mysql php学习总结

    一. html:超文本标记语言,运行在浏览器上,由浏览器解析 1.格式 <!doctype html> 声明文档类型,说明html版本号 <html> 说明代码格式 <h ...

  5. 使用Maven编译运行Storm入门代码(Storm starter)(转)

    Storm 官方提供了入门代码(Storm starter),即 Storm安装教程 中所运行的实例(storm-starter-topologies-0.9.6.jar),该入门代码位于 /usr/ ...

  6. Linux中单引号与双引号区别

    1. 单引号内的所有字符都保持它本身字符的意思,而不会被bash进行解释,echo -e时转义字符(\n,\t等)将被解释,如echo -e 'aa\naa'将是两行aa. 2.除了$.``(不是单引 ...

  7. os.path.join 的用法

    Python中有join和os.path.join()两个函数,具体作用如下: join:连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串os.path.joi ...

  8. 【vue】openshopping-vue

    这是一个基于Vue实现开箱即用H5移动端商城的单页应用 作者的开源地址是:https://github.com/yrinleung/openshopping-vue 我们一起来欣赏页面吧 看看代码有什 ...

  9. hibernate hql语句 group by having 的坑

    我期望获得这个列表 然而,使用hql只能获得第一条数据,后来我琢磨了一下,和group by有关系 应该改成 成功查询到

  10. Neo4j系列-简介及应用场景

    1.什么是Neo4j? Neo4j是一个高性能的NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数据存储 ...