仿苹果导航菜单

前端特效
ramil4icr · Apr 15, 2016 · ed2c93f · ed2c93f
1 parent 2c7aa00
commit ed2c93f
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 0 deletions.
diff --git a/仿苹果导航菜单/1.html b/仿苹果导航菜单/1.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title></title>
+    <style type="text/css">
+        body{
+            margin:0;
+            padding:0
+        }
+        /*这一层是自己添加的，源代码是直接menu为最外层，但是这样不利于布局*/
+        #box{
+            width:100%;
+            height: 200px;
+            position: relative;
+        }
+        #menu{
+            position:absolute;
+            width:100%;
+            min-width: 1000px;
+            bottom:0;
+            text-align:center;
+        }
+    </style>
+</head>
+<body>
+<div id="box">
+    <div id="menu">
+        <img src="images/1.png" />
+        <img src="images/2.png" />
+        <img src="images/3.png" />
+        <img src="images/4.png" />
+        <img src="images/5.png" />
+    </div>
+</div>
+</body>
+<script type="text/javascript">
+    window.onload = function ()
+    {
+        var oMenu = document.getElementById("menu");
+        var aImg = oMenu.getElementsByTagName("img");
+        var aWidth = [];
+        var i = 0;
+        //保存原宽度, 并设置当前宽度
+        for (i = 0; i < aImg.length; i++)
+        {
+            aWidth.push(aImg[i].offsetWidth);  //当前图片为128px乘128px
+            aImg[i].width = parseInt(aImg[i].offsetWidth / 2) ;  //为每一张图片设置新宽度,为原宽度/2
+        }
+        //鼠标移动事件
+        oMenu.onmousemove = function (event)
+        {
+            var EVENT = event || window.event;
+            for (i = 0; i < aImg.length; i++)
+            {
+                var a = EVENT.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
+                var b = EVENT.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
+                var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
+                if (iScale < 0.5) iScale = 0.5;
+                aImg[i].width = aWidth[i] * iScale;
+            }
+        };
+    };
+</script>
+</html>
diff --git a/仿苹果导航菜单/images/1.png b/仿苹果导航菜单/images/1.png
diff --git a/仿苹果导航菜单/images/2.png b/仿苹果导航菜单/images/2.png
diff --git a/仿苹果导航菜单/images/3.png b/仿苹果导航菜单/images/3.png
diff --git a/仿苹果导航菜单/images/4.png b/仿苹果导航菜单/images/4.png
diff --git a/仿苹果导航菜单/images/5.png b/仿苹果导航菜单/images/5.png