今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!

  

<div id="pic_wrap">
<div id="float_box"></div>
<img src="1.jpg">
</div>
<div id="show">
<img src="1.jpg" id="big_img">
</div>

  最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!

        img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(1.jpg);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
background-color: white;
opacity:;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}

HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!

  第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。

  第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。

  第三步,当鼠标完全移除后,需要加onmouseout事件。

  第四步,onmouseover事件需要让放大镜和可视窗口显示出来。

  第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。

  第六步,onmouseout时间,让放大镜和可是窗口消失!

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*body {
margin: 0;
padding: 0;
}*/
img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(1.jpg);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
background-color: white;
opacity: 1;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div id="pic_wrap">
<div id="float_box"></div>
<img src="1.jpg">
</div>
<div id="show">
<img src="1.jpg" id="big_img">
</div>
<script src="等比放大镜.js"></script>
<script type="text/javascript">
var pic_wrap = document.getElementById('pic_wrap'),
float_box = document.getElementById("float_box"),
show = document.getElementById('show');
big_img = document.getElementById("big_img");
//鼠标移入事件,让放大镜和放大区显示!
pic_wrap.onmouseover = function() {
float_box.style.display = "block";
show.style.display = "block";
}
//鼠标不断移动时触发,实时更新放大镜得到的图片
pic_wrap.onmousemove = function(event) {
floatMove(float_box, pic_wrap, event);
showPic();
}
//鼠标移出后,放大镜和放大区隐藏
pic_wrap.onmouseout = function() {
float_box.style.display = "none";
show.style.display = "none";
}
//由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!
function getStyle(obj, attr) {
if (window.currentStyle) {
return parseInt(obj.currentStyle[attr]);
}
else {
return parseInt(getComputedStyle(obj,null)[attr]);
}
}
//运动框架,控制放大镜在原图中的位置!
function floatMove(argu1, argu2, event) {
var e = event ||window.event;
var minLeft = getStyle(argu1, "width");
var maxLeft = getStyle(argu2, "width") - minLeft/2;
var minHeight = getStyle(argu1, "height");
var maxHeight = getStyle(argu2, "height") - minHeight/2;
console.log(maxLeft);
console.log(maxLeft - minLeft/2);
if (e.clientX < minLeft/2) {
float_box.style.left = "0px";//防止放大镜超出左边框
}
else if (e.clientX > maxLeft) {
float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
}
else {
float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
}
if (e.clientY < minHeight/2) {
float_box.style.top = "0px"; //防止放大镜超出上边框
}
else if (e.clientY > maxHeight) {
float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
}
else {
float_box.style.top = event.clientY - minLeft/2 + "px";
}
}
//用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域
function showPic() {
var iCurLeft = getStyle(float_box,"left");
var iCurTop = getStyle(float_box,"top");
var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
var b = getStyle(big_img,"width") - getStyle(show,"width");
var moveWidth = -(iCurLeft/a)*b;
big_img.style.left = moveWidth + "px";
var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
var d = getStyle(big_img,"height") - getStyle(show,"height");
var moveHigth = -(iCurTop/c)*d;
big_img.style.top = moveHigth + "px";
}
</script>
</body>
</html>

原生js实现放大镜效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  6. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

  7. 原生js仿jquery--animate效果

    效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 原生js简易日历效果实现

    这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

随机推荐

  1. 虚拟现实外包公司—焰火工坊CTO团队外包难把VR真正做起来,讲故事可能将伤害产业链

    CTO王明杨,带着他的焰火工坊,正在为自家VR播放器和系统的上线做最后准备.不少投资机构,有传言称包括小米在内巨头都试图染指VR领域,而上月上市的暴风影音正是倚靠VR的概念成功助推了其高股价.对此,王 ...

  2. linux内核学习心得

    最初在其他课程做实验的时候接触到了linux,震撼于linux的开源精神,想更了解linux的内部原理,选了这门课程.通过这门课程对linux内部实现有了一定的了解,主要是中断.进程切换.系统函数的具 ...

  3. Git和.gitignore

    http://blog.csdn.net/cscmaker/article/details/8553980 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .giti ...

  4. nginx rewrite 实现二级域名跳转

    当访问http://cbs.test.com跳转到http://www.test.com/test/cbs/方法一: (这种方法浏览器地址会变www.test.com/test/cbs)server ...

  5. duilib的caption上的Edit无法激活

    当窗口设置标题栏时,鼠标等控件可以相应,edit无法响应. 主要和WindowImplBase::OnNcHitTest 虚函数有关. LRESULT WindowImplBase::OnNcHitT ...

  6. aspx页面常用代码

    Response.Redirect(Request.Url.ToString());//刷新页面 Response.Write("<script>alert('有数据尚未添加') ...

  7. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  8. JSON API免费接口

    来自:http://www.bejson.com/knownjson/webInterface/ 电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuId ...

  9. ActiveReports 11 新特性速递

    又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...

  10. 3.一般用AE开发的时候都会报错,具体只要加一行代码就行

    ESRI.ArcGIS.RuntimeManager.Bind(ESRI.ArcGIS.ProductCode.EngineOrDesktop);