简单实现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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
详解redux异步操作实践
2018/08/15 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python关于反射的实例代码分享
2020/02/20 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
留学推荐信范文
2014/05/10 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
高二化学教学反思
2016/02/22 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
速龙x4-860k处理器相当于i几
2022/04/20 数码科技