简单实现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的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
Mac下安装vue
Apr 11 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
简单的js计算器实现
2016/10/26 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
城管综合整治方案
2014/05/01 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
医学会议开幕词
2016/03/03 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Java实现简易的分词器功能
2021/06/15 Java/Android