<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片缩放</title>

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

    }

      #minBox{

          border:1px solid #ccc;

          width: 350px;

          height: 350px;

          position: relative;

          top: 50px;

          left: 50px;

      }

      #minBox img{

          position: absolute;

      }

     #smBox{

            display: none;

            position: absolute;

            width:150px;

            height: 150px;

            background-color: yellow;

            opacity: 0.3;

        }

    #maxBox {

      display: none;

            position: absolute;

            overflow: hidden;

            left:500px;

            top:50px;

            width:500px;

            height: 500px;

            border:1px solid #d9d9d9;

        }

        #maxBox img {

            position: absolute;

        }

    </style>

</head>

<body>

     <div id="minBox">

          <img src="img/min.jpg">

          <div id="smBox"></div>

     </div>

     <div id="maxBox">

         <img src="img/max.jpg">

     </div>

     <script type="text/javascript">

       //获取节点

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

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

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

       var maxImg = maxBox.children[0];

       //小块鼠标移动事件事件

       minBox.onmousemove = function(){

            var e = e || window.event;

         smBox.style.display = "block";

         maxBox.style.display = "block";

         //计算小块的位置

         //定义

         var sLeft = e.clientX - smBox.offsetWidth/2 -minBox.getBoundingClientRect().left;

         var sTop = e.clientY - smBox.offsetWidth/2 - minBox.getBoundingClientRect().top;

         //判断左右边界，小块距离左边的距离小于0，则意味超界，设置它的left为0;

         //右边边界判断，小块的最大宽度不能>(minBox的视口宽度- 小块本身宽度)，

         if(sLeft<0){

            sLeft= 0;

         }else if(sLeft >minBox.clientWidth- smBox.offsetWidth){

             sLeft = minBox.clientWidth - smBox.offsetWidth;

         }

         //上下边界同理

         if(sTop<0){

             sTop = 0;

         }else if(sTop > minBox.clientHeight - smBox.offsetHeight){

              sTop = minBox.clientHeight - smBox.offsetHeight;

         }

         //鼠标移动、小块跟着移动

         smBox.style.left = sLeft + "px";

         smBox.style.top =  sTop + "px" ;

         //计算小块在minBox移动的比例，大图同比例在maxBox移动;

         //定义设置moveX、moveY 暂存比例

          var moveX = sLeft/(minBox.clientWidth - smBox.offsetWidth); 

          var moveY = sTop/(minBox.clientHeight - smBox.offsetHeight);

          console.log(moveY);

          //大图maxImg移动

          maxImg.style.left = - moveX*(maxImg.clientWidth - maxBox.offsetWidth) +"px";

          maxImg.style.top =  - moveY* (maxImg.clientHeight - maxBox.offsetHeight) +"px";

       }

           //移出滑块的时候

    minBox.onmouseleave = function() {

        smBox.style.display = "none";

        maxBox.style.display = "none";

    }

     </script>

</body>

</html>

JavaScript鼠标经过图片的放大镜效果的更多相关文章

  1. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

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

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

  3. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  6. 基于Jquery的商城商品图片的放大镜效果(非组件)

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  7. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

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

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

  9. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. RecyclerView解密篇（一）

    一.前言 RecyclerView是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视 ...

  2. JavaScript 中的尾调用

    尾调用(Tail Call) 尾调用是函数式编程里比较重要的一个概念,它的意思是在函数的执行过程中,如果最后一个动作是一个函数的调用,即这个调用的返回值被当前函数直接返回,则称为尾调用,如下所示: f ...

  3. python中的collections

    python中有大量的内置模块,很多是属于特定开发的功能性模块,但collections是属于对基础数据的类型的补充模块,因此,在日常代码中使用频率更高一些,值得做个笔记,本文只做主要关键字介绍,详细 ...

  4. pygame学习笔记

    pygame参考文档pdf版:pygame API html版 pygame API 石头剪子布的简单小游戏,待改进的地方,自适应大小.感兴趣的小伙伴可以依据get_surface()返回值(即当前窗 ...

  5. python爬虫成长之路（二）：抓取代理IP并多线程验证

    上回说到,突破反爬虫限制的方法之一就是多用几个代理IP,但前提是我们得拥有有效的代理IP,下面我们来介绍抓取代理IP并多线程快速验证其有效性的过程. 一.抓取代理IP 提供免费代理IP的网站还挺多的, ...

  6. NGUI之UIRoot——屏幕的自适应分辨率的计算

    //原来写在其他博客上的东西,搬迁 预备知识: 要明确的三个概念: 设计分辨率:在编辑器上开发UI使用的分辨率.我们所有的UI都是在这个分辨率下设计制作的. 显示区域分辨率:设备上所显示的UI区域在编 ...

  7. 【Java EE 学习 81】【CXF框架】【CXF整合Spring】

    一.CXF简介 CXF是Apache公司下的项目,CXF=Celtix+Xfire:它支持soap1.1.soap1.2,而且能够和spring进行快速无缝整合. 另外jax-ws是Sun公司发布的一 ...

  8. 前端试题本（Javascript篇）

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  9. Andriod学习笔记4：mac下搭建 Eclipse+CDT 集成开发环境

    下载CDT 从eclipse官网下载最新的Eclipse IDE for C/C++ Developers,例如eclipse-cpp-mars-1-macosx-cocoa-x86_64.tar.g ...

  10. 加密狗的管理层API（C#代码）

    using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...