js实现简单的放大镜效果
更新时间：2021年09月07日 11:23:19 作者：LZC_yEllOwBooK
这篇文章主要为大家详细介绍了js实现简单的放大镜效果，可随意更改，放大区域的大小、比例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简单放大镜效果的具体代码，供大家参考，具体内容如下
效果
效果，鼠标在原图片移动，黄色小盒子跟随鼠标移动，黄色小盒子盖住的部分，在显示区显示
效果图如下：
核心思路
1.鼠标放置在图片上，显示区出现，鼠标离开小盒子，显示区消失
2.鼠标在图片上移动时，小盒子跟随鼠标移动，且鼠标在黄色小盒子中间位置
3.小盒子给判断，让其不能超出图片区域
4.小盒在图片上移动多少，显示区域要移动同比例的距离
5.当显示区大小发生改变，或显示区内容增大变小，原来图片上的黄色小盒子随之改变
操作
1.先把需要用到元素获取过来
// 获取页面上我们需要的元素
var box1=document.querySelector('.box1')
var yellow=document.querySelector('.yellow')
var box2=document.querySelector('#rightbox')
var screen=rightbox.children[0]
2.鼠标放置到图片，显示区域出现，离开则消失
// 鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}
利用鼠标的进入和离开事件就可以做到，分别设置出现和不出现就好了
3.鼠标移动，小盒子跟随移动，且鼠标在黄色小盒子中间
box1.onmousemove=function(e){
// 算出小盒子在图片时，自身的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
}
1.使用事件，鼠标在图片上每一栋一下就触发，做到随时刷新
2.计算出小盒子在图片时，自身的中心点
公式：（用鼠标在页面的位置，减去，图片的偏移距离，减去自身的一半）
这里减去一半是保证鼠标在黄色盒子位置始终保持居中
4.小盒子给判断条件，让黄色小盒子不能超出图片区域
// 鼠标在图片上移动触发事件
box1.onmousemove=function(e){
// 算出小盒子在图片的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// --------------------------------------------------------------------------------
// 新增部分
// 判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
if(x<0){
// 此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
x=box1.offsetWidth-yellow.offsetWidth
}
// 同上
if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// ---------------------------------------------------------------------------------
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
1.判断小盒子的左边是不是超出图片部分，给的if（x<0）此时的0，还是以中心点来计算的
2.判断右边 x>box1.offsetWidth-yellow.offsetWidth
（是否大于 图片区域宽度 减去 小盒子宽度）
为什么是小盒子宽度，判定的是小盒子中心点，且0的位置是小盒子的中心点，已经减去过一半的小盒子，所以右边减去的就是小盒的一半*2
3.上下也一样，这个时候黄色小盒子就不会超出图片区域了
5.小盒在图片上移动多少，显示区域要移动同比例的距离
// 通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例 srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px' srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
显示区域移动的多少，取决于小盒子移动多少
小盒子移动的值 除以 图片的宽度 乘以 显示区域的宽度
显示区域的移动值 就可以和小盒子 在图片的移动比例 相同
6.显示区大小改变或显示区内容变化，图片上黄色盒子随之改变
// 计算黄色小盒子在图片上的大小
yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}
计算方式为：黄色盒子的宽=图片的宽/（显示区域的内容宽度/显示区域的框的宽度）
高度也是一样的
因为，是鼠标移动触发，所以实时刷新
调整
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}
当需要调整框的大小，或放大比例时，改变这两个样式的宽高即可
内容，css，js 整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.img1{
width: 300px;
height: 300px;
}
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}
.yellow{
background-color: yellow;
opacity: 0.5;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.box1{
width: 300px;
height: 300px;
position: relative;
margin-left: 300PX;
}
</style>
</head>
<body>
<div class="box1">
<img src="./images/1.jpg" alt="" class="img1">
<div class="yellow"></div>
</div>
<div id="rightbox">
<img src="./images/1.jpg" alt="" class="img2">
</div>
<script>
// 获取页面上我们需要的元素
var box1=document.querySelector('.box1')
var yellow=document.querySelector('.yellow')
var box2=document.querySelector('#rightbox')
var srceen=rightbox.children[0]
// 鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}
// 鼠标在图片上移动触发事件
box1.onmousemove=function(e){
// 算出小盒子在图片的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// 判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
if(x<0){
// 此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
x=box1.offsetWidth-yellow.offsetWidth
}
// 同上
if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
// 通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例
srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
// 计算黄色小盒子在图片上的大小
yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了postMessage及webSocket跨域方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
Bootstrap CSS组件之下拉菜单(dropdown)
这篇文章主要为大家详细介绍了Bootstrap CSS组件之下拉菜单(dropdown),具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了微信小程序开发之自定义tabBar的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
JS如何获取未来n天的时间(返回日期:yyyy-mm-dd,并且判断是否是今天和星期)
开发中经常遇到获取时间的业务,将常用的方法做个笔记记录下,对JS如何获取未来n天的时间相关知识感兴趣的朋友一起看看吧2024-03-03
这篇文章主要介绍了JS实现的幻灯片切换显示效果,涉及javascript通过扩展实现针对页面元素的动态切换操作相关技巧,需要的朋友可以参考下2016-09-09
使用JavaScript 将数据网格绑定到 GraphQL 服务的操作方法
GraphQL是管理JavaScript应用程序中数据的优秀工具,本教程展示了GraphQL和SpreadJS如何简单地构建应用程序, GraphQL 和 SpreadJS都有更多功能可供探索,因此您可以做的事情远远超出了这个示例,感兴趣的朋友一起看看吧2023-11-11
允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的？下面我们就来通过示例来探讨下。2015-06-06
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍多态，举例说明多态的思想，对多态进行详细剖析，感兴趣的小伙伴们可以参考一下2015-11-11
经常用到对xml的操作，Java里面有dom和dom4j等工具类，但是Javascript就没有，所以自己写了一个，目前算作第一个版本吧。肯定还有很多地方需要改进，如果有需要用的朋友，可以把bug和需要完善改进的地方留言或评论。2009-10-10
JavaScript中从setTimeout与setInterval到AJAX异步
这篇文章主要介绍了JavaScript中从setTimeout与setInterval到AJAX异步,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
最新评论