Heim > Artikel > Web-Frontend > JS implementiert Code_Javascript-Fähigkeiten, die den Menüeffekt der unteren Taskleiste von Apple imitieren

JS implementiert Code_Javascript-Fähigkeiten, die den Menüeffekt der unteren Taskleiste von Apple imitieren

WBOYOriginal: 2016-05-16 15:41:561256Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code, um den Effekt der Nachahmung des unteren Taskleistenmenüs von Apple zu implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Diese Nachahmung des unteren Taskleistenmenüs eines Apple-Computers ist ein in reinem JavaScript implementierter Menüeffekt. Beim Platzieren der Maus entsteht ein Reaktionseffekt, das Menüsymbol wird größer und der Animationseffekt ist sehr flüssig . Dieser Effekt wurde bereits veröffentlicht, wird jedoch mit jQuery implementiert. Für diesen Effekt gibt es derzeit kein jQuery-Plugin.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-f-apple-buttom-nav-menu-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿苹果电脑任务栏菜单</title>
<style type="text/css"> 
body{margin:0;padding:0}
#menu{position:absolute;width:100%;bottom:0;text-align:center;}
</style>
<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);
  aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
 }
 //鼠标移动事件
 document.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>
</head>
<body>
<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" />
 <img src="images/6.png" />
 <img src="images/7.png" />
 <img src="images/8.png" />
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert den supereinfachen TAB-Tab-Effekt code_jqueryNächster Artikel：jquery implementiert den supereinfachen TAB-Tab-Effekt code_jquery

In Verbindung stehende Artikel

Mehr sehen