JavaScript圖片類之蘋果導航效果

<!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)函數(shù)保留2位小數(shù)
                inputData[i].value = scale.toFixed(2);
                // console.log(imgData[i].width);

            }
        };
    }
</script>
</html>
navApple.png
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容