前端实现mac笔记本停靠栏效果
生活随笔
收集整理的這篇文章主要介紹了
前端实现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="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><img src="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
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的前端实现mac笔记本停靠栏效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css中width:100%与width
- 下一篇： ECMAScript6入门教程（一）