console 命令行工具 X clear
console
<style>
	* {
		margin: 0;
		padding: 0;
	}

	#div1 {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
	}

	img {
		width: 64px;
	}
</style>
<script>
	window.onload = function(){
        var aInput = document.getElementsByTagName('input');
        var oDiv = document.getElementById('div1');
        var aImg = oDiv.getElementsByTagName('img');
        
        
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            
            for(var i=0;i<aImg.length;i++){
            
                 //图片距离页面左边边界的距离+每张图片的宽度的一半      这里不用加上div距离页面左边边界的距离，因为宽度是百分百的，距离就为零
                var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
                 //图片距离页面上边边界的距离+每张图片的宽度的一半+加上div距离页面上边边界的距离
                var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
                
                var b = ev.clientX - x;//鼠标坐标的位置减去图片中心点坐标的位置       水平边的
                var a = ev.clientY - y;//鼠标坐标的位置减去图片中心点坐标的位置       垂直边的
                
                var c = Math.sqrt(Math.pow(b,2) + Math.pow(a,2));//知道两条直角边   获取第三条边的长度，也就是勾股定理
                
                 //使鼠标距离图片越近这个值就越大
                var scale = 1 - c/300;  
                
                if(scale<0.5){
                    scale = 0.5;
                }
                
                aInput[i].value = scale;
                
                aImg[i].style.width = scale * 128 + 'px';
                aImg[i].style.height = scale * 128 + 'px';
            }
        };
    };

</script>
</head>

<body>
	<input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div id="div1">
        <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3381573685,1866477444&fm=26&gp=0.jpg">
        <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg">
        <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg">
        <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2961109585,707599822&fm=26&gp=0.jpg">
        <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2852083094,372235004&fm=26&gp=0.jpg">
    </div>
</body>