<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
img{
/*border:1px solid #000;*/
margin: 0;
padding: 0
}
#img{
margin: 0;
position: absolute;
bottom: 0;
width: 99%;
text-align: center;
/*border:1px solid #000;*/
padding: 0
}
</style>
<body>
<input type="text" name="">
<input type="text" name="">
<input type="text" name="">
<input type="text" name="">
<div id="img">
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var imgData = document.getElementsByTagName("img");
var inputData = document.getElementsByTagName("input");
var img = document.getElementById("img");
//鼠標移動事件
document.onmousemove = function(e){
var e = e || event;
//鼠標的位置
var mouseX = e.clientX,
mouseY = e.clientY;
//測試
for(var i = 0;i < imgData.length;i++){
//每個圖片的位置
var imgX = imgData[i].offsetLeft + imgData[i].offsetWidth/2,
imgY = imgData[i].offsetTop + img.offsetTop + imgData[i].offsetHeight/2;
//圖片與鼠標的距離
var distant = Math.sqrt((mouseX-imgX)*(mouseX-imgX)+(mouseY-imgY)*(mouseY-imgY));
//定義比例尺
var scale = 1 - distant/500;
//判斷當比例尺大于0.5時，計算并賦值給圖片寬度
if(scale < 0.5){
scale = 0.5;
imgData[i].width = scale*128;
}else{
imgData[i].width = scale*128;
}
//賦值給input進行測試比例尺,toFixed(2)函數保留2位小數
inputData[i].value = scale.toFixed(2);
// console.log(imgData[i].width);
}
};
}
</script>
</html>
navApple.png
