原生js实现放大镜
效果：
1、 鼠标放上去会有半透明遮罩、右边会有大图片局部图
2、 鼠标移动时右边的大图片也会局部移动
放大镜的关键原理：
鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；
放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；
页面元素：
技术点：事件捕获，定位
难点：计算
需要元素：小图片和大图片，存放小图片和大图片的容器，有一个放大镜；
涉及到的技术点：
（1） 鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）
（2） offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY
- offsetLeft子元素相对于父元素的左位移
- offsetWidth，offsetHeight一个元素的宽度和高度，宽度和高度是不包括滚动条的。
event.clientX、event.clientY鼠标的X轴和Y轴，相对于整个页面的坐标，而不是子元素
- offsetLeft和style.left对比：
（1）、style.left返回的是字符串，如30px、offsetLeft返回的是数值30；
（2）、style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left；
（3）、style.left的值需要事先定义，否则取到的值为空。
style.left只针对在HTML中写的值有效，样式表中无法定义style.left;
制作放大镜所需要的计算
》重点：如何让小图片上的放大镜和大图片同步移动
关键：小图片的比例和大图片的比例是一样的，放大镜比例和右侧大的容器比例是一样的；他们之间的比例是相同的
移动时的比例计算：
放大镜核心计算公式：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 323px;
height: 430px;
margin: 5px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;/*使元素脱离文档流,方便自由操控元素*/
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {/*应该是把图片放在这个上面，它的透明度为0，是个block*/
position: absolute; /*元素脱离文档流，使得图片和浮动框可与之重叠，也正因如此，要↓*/
display: block; ↓
width: 323px; ↓
height: 430px; ↓
background-color: #fff; ↓
filter: alpha(opacity=0);/*过滤器，目前只有少数浏览器支持*/ ↓
opacity: 0; ↓
z-index: 10;/*确保markBox位于floatBox和图片之上，防止markBox被覆盖，导致对markBox的鼠标移动事件不起作用*/
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 330px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
} #big-box img {
position: absolute;
z-index: 5
}
</style>
<script> //页面加载完毕后执行
window.onload = function () {
//找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,
var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objMarkBox=document.getElementById("mark");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImg=objBigBox.getElementsByTagName("img")[0]; //给小盒子添加事件，移入和移出
//移入：浮动的box和和bigBox显示
objSmallBox.onmouseover=function(){
objFloatBox.style.display="block";
objBigBox.style.display="block";
}
//移除：浮动的box和bigBox隐藏
objSmallBox.onmouseout=function(){
objFloatBox.style.display="none";
objBigBox.style.display="none";
} //给小盒子添加鼠标移动事件
objMarkBox.onmousemove=function(ev){
var _event=ev||window.event;//做兼容性，兼容IE
//1计算值：
var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; //5.优化，在前面加判断,不让其溢出，加判断
if(left<0) left=0;
if(top<0) top=0;
if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
top=objSmallBox.offsetHeight-objFloatBox.offsetHeight; //2把值赋值给放大镜
objFloatBox.style.left=left+"px";
objFloatBox.style.top=top+"px"; //3计算比例
var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight); //4利用这个比例计算距离后赋值给右侧的图片
objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";
} }
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"/>
</div>
<div id="big-box">
<img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg"/>
</div>
</div>
</body>
</html>
个人感觉MarkBox是多余的操作，于是我将上述代码中与markBox相关的操作去掉，如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 323px;
height: 430px;
margin: 5px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 330px;
width: 323px;
height: 430px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 10;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
//页面加载完毕后执行
window.onload = function () {
//找五个个元素：demo，smallBox,foatBox,bigfloatBox,imgs,
var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImg=objBigBox.getElementsByTagName("img")[0]; //给小盒子添加事件，移入和移出
//移入：浮动的box和和bigBox显示
objSmallBox.onmouseover=function(){
objFloatBox.style.display="block";
objBigBox.style.display="block";
}
//移除：浮动的box和bigBox隐藏
objSmallBox.onmouseout=function(){
objFloatBox.style.display="none";
objBigBox.style.display="none";
} //给小盒子添加鼠标移动事件
objSmallBox.onmousemove=function(ev){
var _event=ev||window.event;//做兼容性，兼容IE
//1计算值：
var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; //5.优化，在前面加判断,不让其溢出，加判断
if(left<0) left=0;
if(top<0) top=0;
if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
top=objSmallBox.offsetHeight-objFloatBox.offsetHeight; //2把值赋值给放大镜
objFloatBox.style.left=left+"px";
objFloatBox.style.top=top+"px"; //3计算比例
var percentX=left/( objSmallBox.offsetWidth-objFloatBox.offsetWidth);
var percentY=top/( objSmallBox.offsetHeight-objFloatBox.offsetHeight); //4利用这个比例计算距离后赋值给右侧的图片
objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";
} }
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="float-box"></div>
<img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"/>
</div>
<div id="big-box">
<img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg"/>
</div>
</div>
</body>
</html>
运行效果相同
原生js实现放大镜的更多相关文章
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- 用JS实线放大镜的效果
今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
随机推荐
- 最后一次谈 VirtualBox的安装方法
用 VirtualBox....run 或 .rpm安装都可以, 最重要的是要 用 /usr/sbin/vboxconfig -> vboxdrv.sh --> 去创建 VirutalBo ...
- IntelliJ IDEA 中SpringBoot对Run/Debug Configurations配置 SpringBoot热部署
运行一个SpringBoot多模块应用 使用SpringBoot配置启动: Use classpath of module选中要运行的模块 VM options:内部配置参数 -Dserver.por ...
- [转] J2EE基础知识
Servlet总结 阐述Servlet和CGI的区别? CGI的不足之处: Servlet的优点: Servlet接口中有哪些方法及Servlet生命周期探秘 get和post请求的区别 什么情况下调 ...
- WEB 安全学习 一、mysql 注入漏洞
转载: https://www.cnblogs.com/cui0x01/p/8620524.html 一.Mysql数据库结构 数据库A 表名 列名 数据 数据库B 表名 列名 数据 Mysql5.0 ...
- kubernets实战采坑1
1.NLog.config失效,日志ElasticSearch的Index不匹配 <?xml version="1.0" encoding="utf-8" ...
- codeforce 886C Petya and Catacombs （map，思路）
突然发现百度不到这题的单独题解(果然是因为这是水题么),那我就来写一个了~ 先把题给贴了. C. Petya and Catacombs time limit per test 1 second me ...
- Jenkins参数化构建（三）之 Jenkins从文件中读取运行参数
安装Extended Choice Parameter插件 选择‘参数化构建过程’ maven command line中进行引用 clean test -DsuiteXmlFile=src/main ...
- 树莓派 无屏幕 安装Ubuntu系统 无头安装 无显示器 用网线
能看到此篇博客的人说明都尝试失败了,会发现内存卡刷入Ubuntu后,无法通过ssh操作树莓派.是因为官方的ubuntu系统在初次运行时需要设定一些东西,类似windows第一次启动也需要设置那样,如果 ...
- 陌上花开——CDQ分治
传送门 “CDQ分治”从来都没有听说过,写了这题才知道还有这么神奇的算法. (被逼无奈).w(ﾟДﾟ)w 于是看了不少dalao的博客,对CDQ算法粗浅地了解了一点.(想要了解CDQ的概念,可以看下这 ...
- Ubuntu ls: cannot open directory .: Permission denied
把该目录赋予权限: sudo chmod xxx