简单实现js放大镜效果


Posted in Javascript onJuly 24, 2017

本文实例为大家分享了js放大镜效果展示的具体代码,供大家参考,具体内容如下

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body,div,img{
      margin:0;
      padding:0;
    }
    img{
      display:block;
      border:none;
    }
    #box{
      position:absolute;
      top:20px;
      left:20px;
      width:350px;
      height:350px;
      box-shadow:3px 3px 10px 0 #111111;

    }
    #box img{
      width:100%;
      height:100%;

    }
    #mark{
      display:none;
      position:absolute;
      top:0;
      left:0;
      width:175px;
      height:175px;
      background:#000;
      opacity: 0.5;
      filter:alpha(opacity=50);
      cursor:move;

    }
    #boxRight{
      display:none;
      position:absolute;
      top:20px;
      left:380px;
      width:350px;
      height:350px;
      overflow:hidden;
    }
    /*我们右侧的图片的大小是需要严格计算的:
      mark的width是box的width的一半,那么我们的大图宽度也应该是小图的二倍
    */
    #boxRight img{
      position:absolute;
      top:0;
      left:0;
      width:200%;
      height:200%;
    }
  </style>
</head>
<body>
  <div id='box'>
    <img src="img/iphone.jpg" alt="">
    <div id='mark'></div>
  </div>
  <div id='boxRight'>
    <img src="img/iphone_big.jpg" alt="">
  </div>
  <script>
    //放大镜的原理: 我们的mark横向是box的一半,纵向也是box的一半,那么右侧的大图横向(纵向)应该是左侧小图的2倍
    var box = document.getElementById('box');
    var mark = document.getElementById('mark');
    var boxRight = document.getElementById('boxRight');
    //设置mark这个盒子
    function setPosition(e){
      var top = e.clientY - box.offsetTop - (mark.offsetHeight/2);
      var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2);
      //边界判断
      var tempL = 0,tempT = 0;
      var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ;

      if(left<minL){
        mark.style.left = minL + "px";
        tempL = minL;
      }else if(left>maxL){
        mark.style.left = maxL + "px";
        tempL = maxL;
      }else{
        mark.style.left = left + "px";
        tempL = left;
      }
      if(top<minT){
        mark.style.top = minT + "px";
        tempT = minT;
      }else if(top>maxT){
        mark.style.top = maxT + "px";
        tempT = maxT;
      }else{
        mark.style.top = top + "px";
        tempT = top;
      }
      //右侧图片跟着运动:左侧移动多少,右侧跟着移动他的2倍即可
      var oImg = boxRight.getElementsByTagName("img")[0];
      oImg.style.left = -tempL*2 + "px";
      oImg.style.top = -tempT*2 + "px";

    }
    box.onmouseenter = function(e){
      e = e || window.event;
      
      mark.style.display = "block";
      setPosition(e);
      boxRight.style.display = "block";

    }
    box.onmousemove = function(e){
      e = e || window.event;
      setPosition(e);

    }
    box.onmouseleave = function(e){
      e = e || window.event;
      mark.style.display = "none";
      boxRight.style.display = "none";
      
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 #Javascript
在React中如何优雅的处理事件响应详解
Jul 24 #Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 #Javascript
想用好React的你必须要知道的一些事情
Jul 24 #Javascript
You might like
实用函数7
2007/11/08 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
一些.net面试题
2014/10/06 面试题
驾驶员岗位职责
2014/01/29 职场文书
写给老婆的检讨书
2014/02/21 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
《老山界》教学反思
2014/04/08 职场文书
个人担保书范文
2014/05/20 职场文书
建筑工地宣传标语
2014/06/18 职场文书
老人节标语大全
2014/10/08 职场文书
十岁生日答谢词
2015/01/05 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
浅谈Java父子类加载顺序
2021/08/04 Java/Android