<!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. 不得不喷一下中控科技，ZKT，恶心的中控，售后技术和屎一样，半年不见人。

    要做一个指纹考勤机和后台通信写入到mysql.在淘宝看了好多款,于是决定用指纹考勤机w6.卖家当时说支持二次开发,给我发的sdk.于是买了一台测试.机器来了开始测试,使用发的demo不能使用,于是去中 ...

  2. Object-c 内存管理

                    内存管理 主要内容 1.内存管理的概念 2.引用计数 3.如何持有对象所有权 4.自动释放池 5.@property的使用 什么是内存管理 内存管理是关于如何管理对象生 ...

  3. October 28th Week 44th Friday 2016

    Life is not a problem to be solved, but a reality to be experienced. 人生不是待解决的难题,而是等着我们去体验的现实. Press ...

  4. php.ini 配置详解【转载】

    [PHP]engine = On   #是否启用PHP解析引擎zend.ze1_compatibility_mode = Off #是否在Last-Modified应答头中放置该PHP脚本的最后修改时 ...

  5. LeetCode之263. Ugly Number

    ------------------------------------------------------------- 如果一个数的质因子只包括2,3,5,那么这个数n可以表示为:n=2x+3y+ ...

  6. jquery的live转on的办法

    <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1. ...

  7. brew 安装 mysql

    在网上看到各种教程,都会出现ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.soc ...

  8. java 读写properties (配置)文件

    Properties属性文件在Java应用程序中是经常可以看得见的,也是特别重要的一类文件.它用来配置应用程序的一些信息,不过这些信息一般都是比较少的数据,没有必要使用数据库文件来保存,而使用一般的文 ...

  9. JS表单前台校验模板

    表单校验是几乎所有WEB应用都会用到的,这里提供一种用原生JavaScript的简单前台校验 <form id="registerForm" action="&qu ...

  10. （转）论python工厂函数与内建函数

    所谓工厂函数就是指这些内建函数都是类对象, 当你调用它们时,实际上是创建了一个类实例.   工厂函数: int(),long(),float(),complex(),bool() str(),unic ...