放大镜原理分析及jquery实现

今天心血来潮，逛某宝的时候，突然想自个儿倒腾一下放大镜的实现。

放大镜的构成：是由一张小图片和一张等比例的大图片构成的，当鼠标在小图片上移动时，大图片显示对应的地方。

放大镜的本质原理是：当鼠标在小图片上移动时，通过捕捉鼠标在小图片的位置，定位大图片的相应位置。

包含的元素：小图，等比例的大图，放大镜，大图窗口四个要素。

制作放大镜所需要的技术要点：

mouseover 事件，鼠标移到指定的对象时触发；

 objsmallBox.on('mouseover',function(){objFloatBox.css({display : 'block'}) ;objBigBox.css({display : 'block'}) ;});

mouseout事件，鼠标从指定的对象移除触发的事件；

  objsmallBox.on('mouseout',function(){objFloatBox.hide();objBigBox.hide();});

mousemove事件，鼠标指针移动时触发的事件。

  objsmallBox.on('mousemove',function(e){});

其中，mousemove事件是最重要的，并且是需要计算的，以下的js代码都是这个事件响应函数中的。

HTML结构构成是：一个demo div 包含两个子 div，子div里边分别包含小图和大图，另外，第一个子div里还包含一个放大镜div。

    <div id="demo">  <div id="small-box"><div id="float-box"> <span style="color:#ff0000;"><strong>这是放大镜div</strong></span></div><img src="data:image/Penguins-small.jpg"> <span style="color:#ff0000;"><strong>这是小图</strong></span></div><div id="big-box"><span style="color:#ff0000;"> <strong>这是大图窗口</strong></span><img src="data:image/Penguins.jpg" id="bigimg">  <strong><span style="color:#ff0000;">这是大图</span></strong></div></div>

另外，放大镜div和大图窗口是成比例的，现贴出css如下

#demo{display: block;width: 400px;height: 255px;margin: 50px;position: relative;border: 1px solid #CCCCCC;
}
#float-box{display: none;width:160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #CCCCCC;-ms-filter: ;filter: alpha(opacity=50);opacity: 0.5;cursor: move;
}
#big-box{display: none;position: absolute;top:0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #CCCCCC;z-index: 1;
}
#big-box img{position: absolute;z-index: 5;
}
#small-box{position: relative;z-index: 1;
}

接下来就到了最重要的js部分了，我们知道，dom直接的位置计算关系如下：

offsetLeft 是当前元素与父元素的偏移左距离；offsetTop是当前元素与父元素的偏移顶部距离；offsetWidth 是元素的宽（包含padding和border）；offsetHeight是元素的高（包含padding和border）.event.clientX是鼠标在页面上的X坐标位置，event.clientY是鼠标在页面上的Y坐标位置。

offsetLeft是只读的，不能修改；如果要修改元素的左位移，只能修改它的style.left 的值，另外，style.left的值需要事先设定，否则拿到的是空的。

于是，我们现在来分析一下原理。

上述这张图想说明的是，鼠标向左移动多少，放大镜就跟着移动多少，同时大图片就向右移动多少（成比例）。

其中，小图是A，大图是B，放大镜是C，大图窗口是D，放大镜离小图的距离是X，大图窗口离大图的距离是Y。于是就有了上述的公式。现在求的是Y的值。

已知的是：

放大镜的宽高，大图窗口的宽高。

X = 鼠标的位移 - demo的offsetLeft - 小图的offsetLeft - 放大镜宽度/2

其中，A 、B 、C、 D的宽度都是已知的，于是可以求出

Y = X（B-D）/(A-C)

        var left = e.clientX - objDemo.offset().left - objsmallBox.offset().left - objFloatBox.outerWidth()/2;var top = e.clientY - objDemo.offset().top - objsmallBox.offset().top - objFloatBox.outerWidth()/2;if(left<0){left = 0;}else if(left>objsmallBox.outerWidth() - objFloatBox.outerWidth()){left = objsmallBox.outerWidth() - objFloatBox.outerWidth();}if(top<0){top = 0;}else if(top>objsmallBox.outerHeight() - objFloatBox.outerWidth()){top = objsmallBox.outerHeight() - objFloatBox.outerHeight();}objFloatBox.css({ //于是放大镜就跟随鼠标了left : left +"px",top : top +"px"});var precentX = left/(objsmallBox.outerWidth() - objFloatBox.outerWidth());var precentY = top/(objsmallBox.outerHeight() - objFloatBox.outerHeight());var bx = precentX*(objBigBoxImage.outerWidth()-objBigBox.outerWidth());var by = precentY*(objBigBoxImage.outerHeight() - objBigBox.outerHeight());

由于放大镜可能超出小图，于是对left小于0 及大于差值的情况进行了硬性约束。

另外由于鼠标移动的位置和大图移动的位置是相反的，所以，给大图设置的偏移是负值。

    objBigBoxImage.css({left : -bx + "px",top : -by+"px"});

于是，这样放大镜就这样完成了，是不是很简单那。

放大镜原理分析及jquery实现相关推荐

html放大镜原理,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
php 实现自动加载更多,$.ajax+php实战教程之下拉时自动加载更多文章原理分析二...
摘要: 继上一篇<$.ajax+php实战教程之下拉时自动加载更多文章原理分析>文章进行进一步讲解,完善之前的代码及引入ajax和php相关内容...... 上次留下的问题不知道看官们有没 ...
hmr webpack 不编译_Webpack的HMR原理分析
Webpack的HMR原理分析 module.exports = { entry : { main : './src/main.js', home : './src/home.js', common ...
java signature 性能_Java常见bean mapper的性能及原理分析
背景在分层的代码架构中,层与层之间的对象避免不了要做很多转换.赋值等操作,这些操作重复且繁琐,于是乎催生出很多工具来优雅,高效地完成这个操作,有BeanUtils.BeanCopier.Dozer. ...
Select函数实现原理分析
转载自 http://blog.chinaunix.net/uid-20643761-id-1594860.html select需要驱动程序的支持,驱动程序实现fops内的poll函数.select ...
spring ioc原理分析
spring ioc原理分析 spring ioc 的概念简单工厂方法 spirng ioc实现原理 spring ioc的概念 ioc: 控制反转将对象的创建由spring管理.比如,我们以前用 ...
一次 SQL 查询优化原理分析（900W+ 数据，从 17s 到 300ms）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源:Muscleape jianshu.com/p/0768eb ...
原理分析_变色近视眼镜原理分析
随着眼镜的发展,眼镜的外型变得越来越好看,并且眼镜的颜色也变得多姿多彩,让佩戴眼镜的你变得越来越时尚.变色近视眼镜就是由此产生的新型眼镜.变色镜可以随着阳光的强弱变换不同的色彩. 变色眼镜的原理分析 ...
jieba分词_从语言模型原理分析如何jieba更细粒度的分词
jieba分词是作中文分词常用的一种工具,之前也记录过源码及原理学习.但有的时候发现分词的结果并不是自己最想要的.比如分词"重庆邮电大学",使用精确模式+HMM分词结果是[&quo ...
EJB调用原理分析 (飞茂EJB)
EJB调用原理分析 EJB调用原理分析作者:robbin (MSN:robbin_fan AT hotmail DOT com) 版权声明:本文严禁转载,如有转载请求,请和作者联系一个远程对象至少 ...

放大镜原理分析及jquery实现

放大镜原理分析及jquery实现相关推荐

最新文章

热门文章