當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
生活随笔
收集整理的這篇文章主要介紹了
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
查看本章節(jié)
查看作業(yè)目錄
需求說明：
使用JavaScript 中的Math對象和勾股定理公式，計算鼠標的位置與頁面圖片中心點的距離，根據(jù)距離對頁面上的圖片進行放大或縮小處理。距離遠時圖片放大，距離近時圖片縮小
- 隨著鼠標的移動，實時計算鼠標與圖片中心點的距離，在輸入框中顯示圖片的縮放系數(shù)
- 放大倍數(shù)不超過3 倍，縮小不小于50%
實現(xiàn)思路：
實現(xiàn)代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#div{width: 100%;position: absolute;bottom: 0;text-align: center;}img{width: 300px;height: 150px;}input{text-align: center;position: absolute;}</style></head><body><script type="text/javascript">window.onload=function(){var input=document.getElementById("input");var div=document.getElementById("div");var img=document.getElementById("img");window.onmousemove=function(){var x=img.offsetLeft + img.offsetWidth/2;console.log(x)var y=img.offsetTop + img.offsetHeight/2;console.log(y)var b=event.clientX-x;var a=event.clientY-y;var c=Math.sqrt(Math.pow(b,2)+Math.pow(a,2));var scale=Math.floor(c)/100-1;if (scale<0.5) {scale=0.5;} else if(scale>3){scale=3;}input.value=scale;img.style.width=scale*300+"px";img.style.height=scale*150+"px";};};</script><p>圖片縮放系數(shù)：<input type="text" id="input"/></p><div id="div"><img src="img/img_1.jpg" id="img"/></div></body> </html>?
總結
以上是生活随笔為你收集整理的使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PARAMETERS、SELECTION
- 下一篇： 集成maven和Spring boot的