js实现仿苹果dock栏导航特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js实现仿苹果dock栏导航特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding:0;}
        #wrapper{position: absolute;bottom: 0;text-align: center;width: 100%;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
           document.onmousemove=function(ev){
               var oevent=ev||event;
               var aimg=document.getElementsByTagName('img');
               var odiv=document.getElementById('wrapper');
               for(var i=0;i<aimg.length;i++){
                      var x=aimg[i].offsetLeft+aimg[i].offsetWidth/2;
                      var y=aimg[i].offsetTop+odiv.offsetTop+aimg[i].offsetHeight/2;
                      var a=x-oevent.clientX;
                      var b=y-oevent.clientY;
                      var dis=parseInt(Math.sqrt(a*a+b*b));
                      var scale=1-dis/200;
                    if(scale<0.5){
                        scale=0.5;
                    }
                    aimg[i].width=scale*128;

               }
           }
        }
    </script>
</head>
<body>
<div id="wrapper">
    <img src="images/1.png" width="64">
    <img src="images/2.png" width="64">
    <img src="images/3.png" width="64">
    <img src="images/4.png" width="64">
    <img src="images/5.png" width="64">
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)