前端js实现水果放大实例

简介: 其实很简单, 我们只需要知道鼠标距离html文档的距离减去水果盒子到页面的距离就可以得到鼠标到水果盒子边的距离

先看一下要做出这个效果需要什么算法的实现?

首先是得知道鼠标距离这个图片的距离是多少才行

怎么来求这一段距离呢?

其实很简单, 我们只需要知道鼠标距离html文档的距离减去水果盒子到页面的距离就可以得到鼠标到水果盒子边的距离

所以e.pageX可以得到鼠标距离html文档的距离

盒子.offsetLeft可以得到水果盒子到页面的距离

两个相减就可以得到最终的结果

const x = e.pageX - small.offsetLeft;
这个距离我们就得到了,那么你会求鼠标到盒子上边的距离怎么求吗?

其实和刚才的操作是一样的,就不细说了

那么第一步就完成了,之后来做比较关键的一步,首先我们得知道黄色框得跟着我们的鼠标来移动

有js基础的同学应该是知道的,所以直接上代码了

mask.style.left=x-(mask.offsetWidth/2)+"px";
mask.style.top=y-(mask.offsetHeight/2)+"px";
上面代码就是求黄色框跟随鼠标移动

    然后我们基本的以及完成了,最后就是鼠标移动的时候,大的效果图是怎么移动的呢?

首先先分析一下:

    大的效果图也是根据黄色区域框的内容来显示我们要看到的区域内容的,所以他们之间是存在一个关系的,那就是倍数关系(根据自己的实际情况来确定倍数)我这里是两倍的关系,知道倍数关系后,在分析一下,首先黄色框移动100px的距离的话,那么大的效果图是不是要移动200px?答案是肯定的,因为是两倍的关系,所以得到一个公式:

大图所移动的位置=mask的移动距离*大图的最大移动距离/mask的最大移动距离

推出公式后那么也就解决的这个效果的核心功能问题

然后就可以来看看完整代码情况:

html部分:

<title>Document</title>
<link rel="stylesheet" href="水果.css">
<script src="水果.js"></script>


<div class="box">
    <div class="small">
        <img src="images/small.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/big.jpg" alt="">
    </div>
</div>

css部分:

*{

margin: 0;
padding: 0;

}
.box{

/* width: 100%;
height: 900px;
background-color: #000; */

}
.small{

position: relative;
width: 350px;
height: 350px;
border: 1px solid #ccc;

}
.mask{

display: none;
width: 175px;
height: 175px;
position: absolute;
top: 0;
left: 0;
background-color: yellow;
opacity: 0.4;
cursor: move;

}
.big{

display: none;
width: 350px;
height: 350px;
position: absolute;
left: 360px;
top: 0;
overflow: hidden;

}
.big img{

position: absolute;
top: 0;
left: 0;

}

js:

window.addEventListener("load",function(){

let small = document.querySelector(".small");
let mask = document.querySelector(".mask");
let Big = document.querySelector(".big");
let big = document.querySelector(".big img");
// console.log(small);
// console.log(mask);
// console.log(big);
small.addEventListener("mousemove",()=>{
    mask.style.display="block";
    Big.style.display="block";
})
small.addEventListener("mouseout",()=>{
    mask.style.display="none";
    Big.style.display="none";
});
small.addEventListener("mousemove",(e)=>{
    //  console.log(e.pageX);
    //  console.log(e.pageY);
    // console.log(small.offsetLeft);
    const x = e.pageX - small.offsetLeft;
    const y = e.pageY - small.offsetTop;
    // console.log(x);
    // console.log(y);
    // console.log((Number(mask.offsetHeight)/2));
    
    mask.style.left=x-(mask.offsetWidth/2)+"px";
    mask.style.top=y-(mask.offsetHeight/2)+"px";
    if(mask.offsetLeft<0){
        mask.style.left=0;
    }
    if(mask.offsetLeft>small.offsetWidth-mask.offsetWidth){
        mask.style.left=small.offsetWidth-mask.offsetWidth+"px";
    }
    if(mask.offsetTop<0){
        mask.style.top=0;
    }
    if(mask.offsetTop>small.offsetHeight-mask.offsetHeight){
        mask.style.top=small.offsetHeight-mask.offsetHeight+"px";
    }

    // 大图显示对应的位置
    //大图所移动的位置=mask的移动距离*大图的最大移动距离/mask的最大移动距离
    console.log(Big.offsetWidth);
    const bigx = mask.offsetLeft*(big.offsetWidth-Big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
    const bigy = mask.offsetTop*(big.offsetHeight-Big.offsetHeight)/(small.offsetHeight-mask.offsetHeight);
    big.style.left=-bigx+"px";
    big.style.top=-bigy+"px";
    

})

})

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
26天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
49 5
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
52 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
133 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
56 1