JavaScript实现放大镜效果
本文实例为大家分享了JavaScript实现放大镜效果的具体代码，供大家参考，具体内容如下
这次实现的效果如下：
这次的案例稍微有一点难度，在css和js上都需要多加思考，话不多说，让我们来开始吧~
1、首先我们需要使用html和css规划好整体的布局，即两个相邻的盒子A和B，左边的盒子A中还有一个小盒子S。为了实现相邻，我采用的方法是为其均设置position:absolute ，然后设置left和top的值来使其相邻。
小盒子S我们同样可以为其设置position:absolute，调整一下背景颜色即可。
2、然后我们需要使用js来设置动画效果，即：鼠标放在盒子A上时，小盒子S的位置会随着鼠标的移动发生移动，同时盒子B中的图像会成为盒子S覆盖图像的放大版。如何实现呢？
3、首先实现小盒子S的位置变化：调用盒子A的onmousemove函数，传入参数client，表示时间鼠标在盒子A上移动。我们通过client获取鼠标的位置(clientX，clientY)，然后通过(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可获得鼠标在图像上的相对坐标，通过此值减去盒子S的宽度、高度的一半即可获得盒子S在A中的位置。
但是要注意，记得为盒子S设置边界，当横坐标为0或为A盒子宽度、纵坐标为0或者A盒子高度时，要使其坐标固定。
4、接着实现盒子B中的图像会成为盒子S覆盖图像的放大版：我们首先来思考一个问题，这个放大效果如何才能实现呢？ 从我的实现角度出发，对于盒子B来说，它首先需要一个背景图==盒子A中的图像，然后将其放大某个倍数x，当盒子S移动时，改变B的background-position为y，达到放大+移动的效果。
5、最后一点，x和y的值是多少呢？（假定S、A、B均为等比例） x：将盒子B放大的倍数应该等同于A的大小除以S的大小，这样能达到相同的图像范围。y：B移动时的距离变化应该示盒子S移动的距离*（盒子B的大小除以S的大小）。可以多加思考~
可能我的实现方法过程比较复杂，大家如果想到更好的方法可以留言呀
代码如下：
<!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>
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
left: 180px;
top: 100px;
}
#box img {
width: 400px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.7);
vertical-align: bottom;
}
#nav {
width: 480px;
height: 360px;
border: 1px solid rgba(255, 255, 255, 0.7);
position: absolute;
left: 582px;
top: 100px;
background-image: url(../img/morn.jpg);
background-repeat: no-repeat;
background-size: 250% 250%
}
#small {
width: 160px;
height: 120px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="small"></div>
<img src="../img/morn.jpg" alt="">
</div>
<div id="nav"></div>
<script>
let box = document.getElementById("box");
let small = document.getElementById("small");
let nav = document.getElementById("nav");
box.onmousemove = function (client) {
let x = client.clientX - box.offsetLeft;
let y = client.clientY - box.offsetTop;
small.style.left = x - 80 + 'px';
small.style.top = y - 60 + 'px';
let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
let dis_y = box.offsetTop + box.offsetHeight - client.clientY;
nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
nav.style.backgroundPositionY = (60 - y) * 3 + 'px';
if (x - 80 < 0) {
small.style.left = 0;
nav.style.backgroundPositionX = 0;
}
if (dis_x <= 80) {
small.style.left = box.offsetWidth - 160 + 'px';
nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
}
if (y - 60 < 0) {
small.style.top = 0;
nav.style.backgroundPositionY = 0;
}
if (dis_y < 60) {
small.style.top = box.offsetHeight - 120 + 'px';
nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
}
small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";
}
box.onmouseout = function () {
small.style.backgroundColor="transparent"
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript中的Error错误对象与自定义错误类型详解
Error是JavaScript中最原始的错误对象，作为各种异常的基础对象，还有多个衍生的具体的错误类型，这些错误对象类型在nodejs中也可应用，这篇文章主要介绍了JavaScript中的Error错误对象与自定义错误类型,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JS数字千分位格式化实现方法,结合实例形式总结分析了JS实现数字千分位格式化的常用技巧,包括字符串的分割、拼接、遍历及正则操作等相关实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现跳转详情页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要为大家介绍了JavaScript中可选链(?.)用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
在开发项目中多次遇到前台js对象在后台转化java对象的问题，下面就为大家介绍下前台js对象转后台java对象，感兴趣的朋友可以了解下2013-12-12
JavaScript 使用 splice 方法删除数组元素可能导致的问题分析
这篇文章主要介绍了JavaScript 使用 splice 方法删除数组元素可能导致的问题分析,当在 JavaScript 中从数组中删除元素时，使用 splice 方法时需要谨慎，本文给大家详细讲解，需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue双向绑定的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
本文主要介绍了js调用百度分享功能的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论