赞
踩
注:图片素材来自于网络若有侵权请联系删除!
由于C站上传文件下载的话需要c币所以不推荐下载,看到最后会附上代码和素材
土豪请看这里:demo下载
效果如下
鼠标移动和滑动效果
首先需要确认目录关系,我这边的是
所以主体框架就可以写为:
<div id="box">
<!-- 底层主体 -->
<img src="./duck.webp" alt="" />
<!-- 上层图片 -->
<div id="list">
<img src="./hover.png" alt="" />
</div>
</div>
我们可以看到上层和下层是都可以移动的,所以css定位就应该是:
<style> * { margin: 0; } /* 底层图片 */ #box > img { height: 100vh; position: fixed; left: 0; top: 0; transform: scale(1.2); /* transition: 2s; */ } /* 上层图片 */ #box > #list > img { height: 100vh; transform: scale(1.2); position: fixed; bottom: 0; /* transition: 2s; */ // 最好不要加,要不然让你心态炸裂 } </style>
如下图
因为如果我就直接放上去的化左右移动的时候他就会图片严重变形上下左右没有内容会导致观感不好所以就要放大一点
好了上面说了基本的一些定位和布局现在我们该来讲一讲JavaScript的交互的设计了
当鼠标再页面上移动时:
上下移动也是如此
// 当鼠标再页面上移动开始计算坐标 document.getElementById("box").onmousemove = function (event) { // 如果鼠标再页面的元素上否则不生效 if (fout == true) { console.log(hover_x - event.screenX); console.log(hover_y - event.screenY); console.log(event.screenX, event.screenY); // 计算底层的偏移值 if (event.screenX > 0) { document.querySelector("#box>img").style.left = `${ (hover_x - event.screenX) / 10 }px`; document.querySelector("#box>img").style.top = `${ (hover_y - event.screenY) / 10 }px`; } // 计算顶层的偏移值 if (event.screenY > 0) { document.querySelector("#box>#list>img").style.top = `${ (hover_y + event.screenY) / 10 }px`; document.querySelector("#box>#list>img").style.left = `${ (hover_x + event.screenX) / 10 }px`; } } };
眼尖的朋友可能会发现我写了
原因鼠标移动到页面上时以他伪定位的基础上开始移动就相当于以他伪基础开始计算鼠标移动的坐标(通过他来计算顶层和底层要移动的大小所以定义hoverx和hovery的代码为)
var fout = 0;
//声明x和y
var hover_x;
var hover_y;
// 当移动到页面上时
document.getElementById("box").onmouseover = function (event) {
fout = 1;
hover_x = event.screenX;
hover_y = event.screenY;
console.log(hover_x, hover_y);
};
相信眼尖的朋友可能又会发现我定义了一个fout
这是为什么呢?
因为当我移动出页面的时候页面需要复位,否则可能就会出现过度偏移的风险
所以失焦复位的代码就是
// 鼠标移出页面就关闭交互
document.getElementById("box").onmouseout = function (event) {
// 页面失去焦点就关闭效果
fout = false;
};
<!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; } #box > img { height: 100vh; position: fixed; left: 0; top: 0; transform: scale(1.2); /* transition: 2s; */ } #box > #list > img { height: 100vh; transform: scale(1.2); position: fixed; bottom: 0; /* transition: 2s; */ } </style> </head> <body> <div id="box"> <!-- 底层主体 --> <img src="./duck.webp" alt="" /> <!-- 上层图片 --> <div id="list"> <img src="./hover.png" alt="" /> </div> </div> <script> var fout = 0; var hover_x; var hover_y; // 当移动到页面上时 document.getElementById("box").onmouseover = function (event) { fout = 1; hover_x = event.screenX; hover_y = event.screenY; console.log(hover_x, hover_y); }; // 当鼠标再页面上移动开始计算坐标 document.getElementById("box").onmousemove = function (event) { // 如果鼠标再页面的元素上否则不生效 if (fout == true) { console.log(hover_x - event.screenX); console.log(hover_y - event.screenY); console.log(event.screenX, event.screenY); // 计算底层的偏移值 if (event.screenX > 0) { document.querySelector("#box>img").style.left = `${ (hover_x - event.screenX) / 10 }px`; document.querySelector("#box>img").style.top = `${ (hover_y - event.screenY) / 10 }px`; } // 计算顶层的偏移值 if (event.screenY > 0) { document.querySelector("#box>#list>img").style.top = `${ (hover_y + event.screenY) / 10 }px`; document.querySelector("#box>#list>img").style.left = `${ (hover_x + event.screenX) / 10 }px`; } } }; // 鼠标移出页面就关闭交互 document.getElementById("box").onmouseout = function (event) { // 页面失去焦点就关闭效果 fout = false; }; </script> </body> </html>
底层图片:
顶层图片:
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。