<!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. iOS支付宝支付总结

    1.按照http://doc.open.alipay.com/doc2/detail?spm=0.0.0.0.SWdJgo&treeId=59&articleId=103676& ...

  2. 【转】理解 PHP 依赖注入 | Laravel IoC容器

    Laravel框架的依赖注入确实很强大,并且通过容器实现依赖注入可以有选择性的加载需要的服务,减少初始化框架的开销,下面是我在网上看到的一个帖子,写的很好拿来与大家分享,文章从开始按照传统的类设计数据 ...

  3. AngularJs学习

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. SpringMVC中如何在网站启动、结束时执行代码（详细，确保可用）

        在一个网站启动.结束时,我们经常有些操作是需要执行的. 熟悉Asp.net的朋友,使用Global.asax很容易就搞定,在其中有Application_Start和Application_E ...

  5. HTTP请求应答服务——HTTP Request & Response Service

    服务站点:https://httpbin.org/ Freely hosted in HTTP, HTTPS & EU flavors by Runscope DESCRIPTION Test ...

  6. c语言快速入门3

    如果你想快速入门计算机,可以参考我的上一篇帖子,先了解一些必备的软知识,然后再来进行语言的快速入门 计算机入门基础知识 c语言快速入门1 c语言快速入门2 3.4.1 字符和字符串 字符:'' 单个  ...

  7. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  8. 获取html 中的内容 将前台的数据获取到后台

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  9. 1、Spring In Action 4th笔记（1）

    Spring In Action 4th笔记(1) 2016-12-28 1.Spring是一个框架,致力于减轻JEE的开发,它有4个特点: 1.1 基于POJO(Plain Ordinary Jav ...

  10. POJ No.2386【B007】

    [B007]Lake Counting[难度B]—————————————————————————————————————————— [Description] Due to recent rains ...