JS图片类之苹果导航效果_js实现图片规划导航-CSDN博客

本文链接：https://blog.csdn.net/qq_23870025/article/details/56673462

<!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">
        ![](images/icon1.ico)
        ![](images/icon2.ico)
        ![](images/icon3.ico)
        ![](images/icon4.ico)
    </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>