放大镜的实现代码与详解

放大镜是通过一大，一小两张图片实现的：

1、原图宽高比例=缩略图宽高比=放大镜的宽高比
           2、大放大镜与小放大镜的倍数=原图与缩略图的倍数
           3、默认两个放大镜与图片都是左上角重叠
           4、原图相对于小放大镜反方向移动相应倍数的距离

     <div class="wrapper"><!-- 小图:380*250,缩小2倍 --><div class="little"><img src="./imgs/5.png" alt=""><!-- 放大镜：190*125 --><div class="mark"></div></div><!-- 大放大镜 --><div class="great"><!-- 大图:760*500 --><img src="./imgs/5.png" alt=""></div></div>

css:

         .little{width: 380px;height: 250px;border: 1px solid black;position: relative;}/* 小图 */.little img{width: 380px;height: 250px;}/* 小放大镜 */.little .mark{width: 190px;height: 125px;background-color: blue;opacity: 0.5;position: absolute;left: 0;top: 0;/* 默认隐藏 */display: none;}/* 大放大镜 */.great{width: 380px;height: 250px;border: 1px solid red;overflow: hidden;position: relative;/* 默认隐藏 */display: none;}.great img{position: absolute;left: 0;top: 0;}

js:

            var _litte=document.querySelector(".little"); //小图框var _mark=document.querySelector(".mark");  //小放大镜var _great=document.querySelector(".great"); //大放大镜var _img=document.querySelector(".great img"); //大图_litte.onmouseover=function(){_great.style.display="block";_mark.style.display="block";}_litte.onmouseout=function(){_great.style.display="none";_mark.style.display="none";}_litte.onmousemove=function(event){//计算小放大镜的x，yvar dx=event.pageX-_litte.offsetLeft-_mark.offsetWidth/2;var dy=event.pageY-_litte.offsetTop-_mark.offsetHeight/2;//到左边if(dx<=0){dx=0;}// 到最右边if(dx>=_litte.offsetWidth-_mark.offsetWidth){dx=_litte.offsetWidth-_mark.offsetWidth;}//到上边if(dy<=0){dy=0;}//到下边if(dy>=_litte.offsetHeight-_mark.offsetHeight){dy=_litte.offsetHeight-_mark.offsetHeight;}_mark.style.top=dy+"px";_mark.style.left=dx+"px";_img.style.left=-2*dx+"px";_img.style.top=-2*dy+"px";}

放大镜的实现代码与详解相关推荐

Eclipse编译运行Native代码步骤详解
Eclipse编译运行Native代码步骤详解标签: android jni层 android jni步骤 android jni接口转自: http://blog.csdn.net/ ...
java网络编程阻塞_Java网络编程由浅入深三一文了解非阻塞通信的图文代码示例详解...
本文详细介绍组成非阻塞通信的几大类:Buffer.Channel.Selector.SelectionKey 非阻塞通信的流程ServerSocketChannel通过open方法获取ServerSo ...
java学习类变量类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(static) 类变量是该类的所有对象共 ...
编程 ul 不能一行显示跳到下行_史上最全的数控G代码编程详解
一.G代码功能简述 G00------快速定位 G01------直线插补 G02------顺时针方向圆弧插补 G03------逆时针方向圆弧插补 G04------定时暂停 G05------通 ...
xilinxFPGA-VGA时序+代码实现详解
xilinxFPGA-VGA时序+代码实现详解 VGA时序详解 VGA接口定义 VGA时序说明行同步信号HYSNC 场同步信号VYSNC VGA时序查找 HYSNC VYSNC BLANK RGB ...
（机器学习）随机森林填补缺失值的思路和代码逐行详解
随机森林填补缺失值 1.使用0和均值来填补缺失值 2.用随机森林填补缺失值的思路 3.使用随机森林填补缺失值代码逐行详解 3.1导包,准备数据,以及创造缺失的数据集 3.2数据集中缺失值从少到多进行排 ...
x264 代码重点详解详细分析
eg mplayer x264 代码重点详解详细分析分类: ffmpeg 2012-02-06 09:19 4229人阅读评论(1) 收藏举报 h.264codecflv优化initializ ...
强化学习教程（四）：从PDG到DDPG的原理及tf代码实现详解
强化学习教程(四):从PDG到DDPG的原理及tf代码实现详解原创 lrhao 公众号:ChallengeHub 收录于话题 #强化学习教程前言在前面强化学习教程(三)中介绍了基于策略「PG」算 ...
如何在Python中获取图片分辨率？——Python实现获取图片分辨率的代码及详解。
如何在Python中获取图片分辨率?--Python实现获取图片分辨率的代码及详解. 在进行图片处理或者图片分析的时候,获取图片的分辨率信息是必不可少的.Python提供了许多库可以方便地获取图片的分 ...

放大镜的实现代码与详解

放大镜的实现代码与详解相关推荐

最新文章

热门文章