前端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";
    

})

})

目录
相关文章
|
9天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
7天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
10天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
24 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
11天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
10天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
26 4
|
10天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
14 2
|
14天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
|
9天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
10天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
下一篇
无影云桌面