<!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
网友评论