<!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. StringUtils中 isNotEmpty 和isNotBlank的区别

    isNotEmpty : 判断某字符串是否非空 StringUtils.isNotEmpty(null) = false StringUtils.isNotEmpty("") = ...

  2. tp5 中 model 的获取器

    在获取数据的字段值后自动进行处理 // 模型中写入如下代码,则查询结果会自动将status的结果进行转换 class User extends Model { public function getS ...

  3. brew 安装 mysql

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

  4. ViewPager中Fragment切换过程不被销毁的方法

    背景:最近在写一个音乐播放器,然后一个ViewPager里面加载了四个Fragment,但是在切换过程中发现,Fragment总是被销毁,在网上查了一下,发现有两种办法可以保证Fragment不被销毁 ...

  5. [MS SQL Server]SQL Server如何开启远程访问

    在日常工作中,经常需要连接到远程的MS SQL Server数据库中.当然也经常会出现下面的连接错误. 解决方法: 1. 设置数据库允许远程连接,数据库实例名-->右键--->属性---C ...

  6. [转]IIS6.0迁移至IIS7.0

    原文地址:http://www.splaybow.com/post/iis-6.0-7.0.html 公司的项目需要迁移到IIS7的目标机器中 在此做记录 原来server 2003系统 迁到2008 ...

  7. Ueditor之前后端源码的学习和简单的研究

    这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...

  8. XSS之xssprotect(转)

    参考资料 1 跨网站脚本 http://zh.wikipedia.org/wiki/XSS 2 http://code.google.com/p/xssprotect/ 一 跨网站脚本介绍      ...

  9. (UWP开发)在ListView中通过向右滑动展开汉堡菜单

    首先在移动APP开发中,手势滑动已经成为一个必备的技能,无论大大小小的APP都需要拥有手势滑动功能.在Android和iOS操作系统的APP中,手势滑动比较普及.然而由于国内有关UWP应用的教程比较少 ...

  10. MIT 6.828 JOS学习笔记11 Exercise 1.8

    Exercise 1.8       我们丢弃了一小部分代码---即当我们在printf中指定输出"%o"格式的字符串,即八进制格式的代码.尝试去完成这部分程序. 解答: 在这个练 ...