原生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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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读取XML值的代码(推荐)
2011/01/01 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
js实现日历的简单算法
2017/01/24 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript正则表达式和级联效果
2017/09/14 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
土木工程应届生求职信
2013/10/31 职场文书
品管员岗位职责
2013/11/10 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
策划总监岗位职责
2014/02/16 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP