前端实现mac笔记本停靠栏效果

1.代码演示

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}#wrap{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;}#wrap > img{width: 64px;}</style></head><body><div id="wrap"><img src="data:images/1.png"/><img src="data:images/2.png"/><img src="data:images/3.png"/><img src="data:images/4.png"/><img src="data:images/5.png"/></div></body><script type="text/javascript">window.onload=function(){var r = 320;var imgNodes = document.querySelectorAll("#wrap > img");document.onmousemove=function(ev){ev =  ev||event;for(var i=0;i<imgNodes.length;i++){var a = imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX;var b = imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetHeight/2 - ev.clientY;var c = Math.sqrt(a*a+b*b);if(c>=r){c=r;}imgNodes[i].style.width =128 - c*0.2 +"px";}}}</script>
</html>

效果图如下：

实现原理：

当我们将鼠标移动到中间的黑线以上时，图片保持不变，为之前设置好的64px。当移动到黑线以下时，以图片为圆心画圆，越接近圆心，图片的大小越大。

这里我们利用getBoundingClientRect、offsetWidth、clientX的属性特征，求得鼠标点到圆心的距离，然后添加一个鼠标移动事件，让每一张图片都随着鼠标的接近改变图片的大小。

想让黑线上移或下移，就控制r的大小，改变width的算法参数。

2.相关知识点

1）getBoundingClientRect

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

2）clientX、clientY

属性	描述
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。

3）offsetWidth、offsetHeight

https://blog.csdn.net/qq_20438233/article/details/46708847

前端实现mac笔记本停靠栏效果相关推荐

HyperDock优化Mac的Dock栏
HyperDock优化Mac的Dock栏效果非常的棒,hyperdock mac支持使用窗口自动排列功能,您可以直接通过将窗口拖拉至屏幕上方来快速最大化至全屏,又或者拖动到左右来进行左分屏和右分屏. ...
Mac停靠栏BitDock v1.9.3.2
软件介绍 BitDock 是一款运行在Windows系统中的停靠栏工具,这种停靠栏很有个性,而且很适用.它让你在使用 Windows 更加的动感,而且还支持使用拖曳的方式来自定义要启动的程序,或是资料 ...
2015款Mac笔记本安装Windows10系统到外置移动硬盘教程
终于把2015年的15寸Macbook Pro笔记本安装上了Windows10操作系统,并且是在外置的移动硬盘上安装的.运行的效果和用户体验也是非常棒. 之前网上购买了加密的视频,但是这个视频必须是w ...
Mac笔记本安装Webstrom
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编辑器&qu ...
mac笔记本怎么外接显示屏_Mac电脑外接显示器全攻略
苹果现在售出的笔记本数量已经超过了台式机,所以很多人现在使用的Mac屏幕只有15寸或者更小.人们尝试为Mac笔记本外接一个显示器时,那些专业词汇却让人眼花缭乱:显示器类型.连接方式.屏幕尺寸等等.如果 ...
mac笔记本怎么外接显示屏_苹果MAC笔记本怎么外接显示屏
苹果MAC笔记本外接显示器设置方法/步骤: 1.如果要在 Mac 上外接显示器的话,首先是要考虑采用什么样的接口.一般我们是通过 VGA 或 HDMI 来外接显示器的.如果 Mac 电脑上没有可以外接 ...
【mac】如何在Mac系统Dock栏中插入空格/半透明隐藏应用程序
[mac]如何在Mac系统Dock栏中插入空格/半透明隐藏应用程序/添加最近使用 Dock栏中插入空格最近一些用户的 Dock 栏变得非常的酷,在应用程序之间,存在着一些空格,这样使得一些具有类似功 ...
mac os 录屏快捷键_如何才能高效的使用mac笔记本？mac笔记本高效使用教程
如何才能高效的使用mac笔记本?高效的操作mac系统教程,别像用windows本那样用你的mac.下方好用的软件,macdown提供下载,需要的朋友不要错过. 1)基础设置与操作拿到macbook, ...
如何才能高效的使用mac笔记本
如何才能高效的使用mac笔记本?高效的操作mac系统教程,别像用windows本那样用你的mac. 1)基础设置与操作拿到macbook,你还是要经常按下触摸板的压力键,才能控制鼠标打开程序.拖动文 ...

前端实现mac笔记本停靠栏效果

1.代码演示

2.相关知识点

前端实现mac笔记本停靠栏效果相关推荐

最新文章

热门文章