html鼠标移动距离,简单的鼠标移动元素近大远小效果

效果：

前置知识：CSS position，js map函数

实现原理：

视觉原理：远处的物体移动慢，近处的物体移动快

实现原理：在鼠标移动的时候，在原 div 的原有位置上+鼠标移动的距离和z-index的乘积

*Q:为什么要乘z-index?

A:在初始div的时候要给每个都设置z-index，越大(离你越近)的物体z-index越高or大*

步骤：

①获取每个div

②获取每个div当前的left和top

③鼠标移动时给每个元素加上鼠标移动距离*z-index；

代码实现：

HTML代码：

①获取每个div：

let aDiv=document.getElementsByTagName('div');

②获取每个div当前的left和top：

let oldPos=Array.from(aDiv).map(div=>{

return {

left:div.offsetLeft,

top:div.offsetTop

}

});

③鼠标移动时给每个元素加上鼠标移动距离*z-index；

document.οnmοusemοve=function(ev){

let event=ev||window.event;

Array.from(aDiv).forEach((div,index)=>{

div.style.left=oldPos[index].left+event.clientX*div.style.zIndex/100+'px'; //除100是为了div移动的不要太快

div.style.top=oldPos[index].top+event.clientY*div.style.zIndex/100+'px';//同理

})

}

完整代码：

Document

window.οnlοad=function(){

let aDiv=document.getElementsByTagName('div');

let oldPos=Array.from(aDiv).map(div=>{

return {

left:div.offsetLeft,

top:div.offsetTop

}

});

document.οnmοusemοve=function(ev){

let event=ev||window.event;

Array.from(aDiv).forEach((div,index)=>{

div.style.left=oldPos[index].left+event.clientX*div.style.zIndex/100+'px';

div.style.top=oldPos[index].top+event.clientY*div.style.zIndex/100+'px';

})

}

html鼠标移动距离,简单的鼠标移动元素近大远小效果相关推荐

PYTHON鼠标记录器一个简单的鼠标记录器可以修改坐标和点击的时间
PYTHON鼠标记录器一个简单的鼠标记录器可以修改坐标和点击的时间. 差一个定时器,如果加上定时器,估计就是解放了守在电脑边的你. 定时器版本忘了放在哪里了.先分享这个给对编程爱好的朋友,虽然我在 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
鼠标点击测试_鼠标键盘如何检测故障，这边教您简单的测试
沉迷,教您简单的测试鼠标故障. 有线键盘和鼠标的检测步骤: (1)将电脑关机,拔插对应的连接线. (2)移除所有除了键盘和鼠标之外的设备,然后重启电脑. (3)重启后,观察鼠标的灯是否有亮.点击滚动锁 ...
网页设计 html鼠标悬停,利用css3实现的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 实现的代码. html代码: 复制代码代码如下: Single gr ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
Unity 进阶之简单模仿鼠标交互（场景：手机屏幕当做触摸板Touch Pad，移动鼠标，鼠标确定等操作）
Unity 进阶之简单模仿鼠标交互(场景:手机屏幕当做触摸板Touch Pad,移动鼠标,鼠标确定等操作) 目录 Unity 进阶之简单模仿鼠标交互(场景:手机屏幕当做触摸板Touch Pad ...
【原】简单的鼠标切换左右键(java版)
简单的鼠标切换左右键(java版) 0. 写在最前面客户需要一个能切换左右键的小功能满足使用需要. 具体需要如下: 我需要一个独立运行的窗口,在其中输入数字x,按下"转换"按钮后 ...
简单实现鼠标移上去显示所有文字，移走又隐藏
简单实现鼠标移上去显示所有文字,移走又隐藏,并且会依据你鼠标的位置,相应的发生改变. jsp代码: <div id="allDiv" style="border:s ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...

html鼠标移动距离,简单的鼠标移动元素近大远小效果

html鼠标移动距离,简单的鼠标移动元素近大远小效果相关推荐

最新文章

热门文章