<!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. KAOS模型

    问题描述: 我们开发了一种针对时序数据的文件格式TSFile,本身不支持sql查询.为了让公司分析人员能够用SQL进行分析,并且应用一些机器学习算法进行预测,需要设计并实现一个TSFile与Spark ...

  2. 【笔记】MySQL查询排名

    select a.name, a.total_score,@rank:=@rank+1 as rank from (                  select u.name,uti.total_ ...

  3. Oracle 之SQL_Loader

    SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据仓库选择使用的加载方法,因为它提供了最快速的途径(DIRECT,PAR ...

  4. 10201启动时候报ORA-27125

    [ora10g@oracle ~]$ sqlplus / as sysdba SQL*Plus: Release 10.2.0.1.0 - Production on Thu Feb 26 18:46 ...

  5. C++ 系列：多线程资源收集

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  6. Kafka基本原理

    简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...

  7. MongoDB 分页查询的方法及性能

    最近有点忙,本来有好多东西可以总结,Redis系列其实还应该有四.五.六...不过<Redis in Action>还没读完,等读完再来总结,不然太水,对不起读者. 自从上次Redis之后 ...

  8. SOUI开发者论坛

    http://www.lumaba.cn/forum.php?mod=forumdisplay&fid=2 需要的朋友可以上去交流.

  9. 用 CallerMemberName Attribute 和 EqualityComparer 统一处理类的属性值变化

    当需要实现类似 INotifyPropertyChanged 这样的接口的时候,每一个属性去判断值是否变化,然后触发事件什么的,太麻烦了,如果能用一个方法统一处理就好了. 好在真的可以做到.这个博文说 ...

  10. ActiveMQ

    前言 MQ--Message Queue,中文翻译为"消息队列",维基百科上的这样描述: 消息队列(英语:Message queue)是一种进程间通信或同一进程的不同线程间的通信方 ...