原生js实现放大镜


Posted in Javascript onFebruary 20, 2017

原理:左边阴影在左边图片上从左到右移动的时候,右边大框也在右边大图片上从左到右移动(尽管在视觉、原理和代码上是相反的);所谓放大,其实就是一张原本就很小的图对应一张原本就很大的图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
      width: 100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
      width: 200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<div id="small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
  var small=document.getElementById('small');
  var inner=small.getElementsByTagName('div')[0];
  var big=document.getElementById('big');
  var img=big.getElementsByTagName('img')[0];
  //当鼠标移入small的时候,inner和big显示
  small.onmouseover=function(){
    big.style.display='block';
    inner.style.display='block';
  };
  //当鼠标在small移动的时候:1)鼠标在inner的中间 2)inner跟随鼠标移动
  small.onmousemove=function(e){
    e=e||window.event;
    var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
    var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
    if(left<=0){
      left=0;
    }else if(left>=this.offsetWidth-inner.offsetWidth){
      left=this.offsetWidth-inner.offsetWidth
    }
    if(top<=0){
      top=0;
    }else if(top>=this.offsetHeight-inner.offsetHeight){
      top=this.offsetHeight-inner.offsetHeight
    }
    inner.style.left= left+'px';
    inner.style.top= top+'px';
    //当inner移动的时候,大图跟着一起移动,并且,大图和inner移动的方向相反;
    //或者理解为:左边阴影在图片上从左到右移动的时候,右边大框也在大图片上从左到右移动(尽管视觉上是相反的)。
    img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
    img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
  };
  //当鼠标移出的时候,inner和big隐藏;
  small.onmouseout=function(){
    big.style.display='none';
    inner.style.display='none';
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 #Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 #Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
You might like
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php实现文件预览功能
2017/05/23 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python实现自动清理重复文件
2020/08/24 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
python statsmodel的使用
2020/12/21 Python
用python批量移动文件
2021/01/14 Python
.NET程序员的数据库面试题
2012/10/10 面试题
日语专业推荐信
2013/11/12 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
求职自我评价怎么写
2015/03/09 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python