JS implements imitating Apple bottom taskbar menu effect code

Home

Web Front-end

JS Tutorial

JS implements imitating Apple bottom taskbar menu effect code_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

js task bar menu

The example in this article describes the JS code to implement the effect of imitating Apple's bottom taskbar menu. Share it with everyone for your reference. The details are as follows:

This imitation of the bottom taskbar menu of an Apple computer is a menu effect implemented in pure JavaScript. When the mouse is placed, there will be a response effect, the menu icon will become larger, and the animation effect is very smooth. This effect has been posted before, but it is It is implemented using jQuery. There is no jQuery plug-in for this one today.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Saving in R.E.P.O. Explained (And Save Files)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7563

CakePHP Tutorial

1385

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to disable taskbar thumbnail preview in Win11? Turn off the taskbar icon display thumbnail technique by moving the mouse Feb 29, 2024 pm 03:20 PM

This article will introduce how to turn off the thumbnail function displayed when the mouse moves the taskbar icon in Win11 system. This feature is turned on by default and displays a thumbnail of the application's current window when the user hovers the mouse pointer over an application icon on the taskbar. However, some users may find this feature less useful or disruptive to their experience and want to turn it off. Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another drawback is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. but

What should I do if the Win7 taskbar does not display the icon? How to solve the problem of the computer taskbar icon disappearing Jun 09, 2024 pm 01:49 PM

Recently, many users using Win7 system have found that the icons in the taskbar suddenly disappeared, which makes the operation very inconvenient and they do not know how to solve the problem. This article will introduce to you how to solve the problem of disappearing taskbar icons in Win7 system. Bar! Cause Analysis When encountering such a situation, there are generally two situations: one is that the taskbar on the computer does not really disappear, but is just hidden, and the other is that the taskbar does disappear. Method 1: 1. There is a situation that you need to confirm first, that is, when the mouse is placed at the bottom of the screen, the taskbar will be displayed. You can directly click the mouse on the taskbar and select "Properties". 2. In the dialog box that opens, click & on the "Hide taskbar" option.

How to reduce the height of the taskbar in win11? Tutorial on resizing the taskbar in Windows 11 Feb 29, 2024 pm 12:37 PM

When we use win11, we will find that the height of the taskbar is a bit high, which feels a bit unsightly to some users. So how to reduce the height of the win11 taskbar? Users can directly click the Registry Editor under the Start menu, and then find the Advanced folder to operate. Let this site carefully introduce to users how to adjust the taskbar size in Windows 11. How to resize the taskbar in Windows 11 First, we need to open the Registry Editor. You can open the registry editor by clicking the Start menu and entering "regedit" in the search box, or by pressing the Win+R key combination to open the Run function and entering "regedit".

How to make the Win11 taskbar black? Introduction to how to set the black taskbar in Win11 Apr 22, 2024 pm 06:40 PM

Some friends also want the taskbar to turn black after changing the dark wallpaper on their computers, but they don’t know how to do it. Let’s take a look at the specific methods below! 1. Right-click an empty area in the taskbar and select "Taskbar Settings." 2. In the taskbar settings window, find the "Appearance" tab and click it. 3. Under the "Appearance" tab, find the "Taskbar Background" option and click the drop-down menu. 4. Select "Black". 5. Close the "Taskbar Settings" window. Taskbar beautification Xiaozhi Eye Protector is a very easy-to-use win11 transparent taskbar tool. It supports taskbar transparency, taskbar beautification, and multiple styles to beautify the taskbar interface, making your computer interface more beautiful. Xiaozhi Eye Protector Eye Baby (click to download now) Xiaozhi Eye Protection

How to solve the problem that the win11 taskbar does not respond when clicked/cannot be used May 09, 2024 pm 06:43 PM

After upgrading to Windows 11 system, many users encountered the problem that the taskbar cannot be clicked, which has a great impact on life and work. So how to solve it specifically? Let’s take a look below! Method 1 1. First, we press the Ctrl+Shift+Esc shortcut keys on the keyboard to open the Task Manager. 2. Then click File in the upper left corner and select Run New Task. 3. After opening it, enter control and press Enter to enter the control panel. 4. Find the time and area and choose to change the date and time. 5. Change the time to September 4 or later, turn off automatic time synchronization after the setting is completed, and then restart the computer. 6. After restarting, re-enter the time settings and come to the internet time selection.

How to expand the stacked display of the Win11 taskbar? Tutorial on stacking and expanding the Win11 taskbar Jan 29, 2024 am 11:33 AM

When we use win11 system, we will find that our taskbar windows are merged. Many users don't like this operation very much. So how to expand the win11 taskbar stacking? Users can directly click on the taskbar settings under the right button, and then directly find the taskbar corner overflow option in the right menu to operate. Let this site carefully introduce to users how to expand the win11 taskbar stack. How to expand taskbar stacking in Windows 11 Method 1. 1. Right-click on a blank space on the taskbar and select Taskbar Settings. 3. After clicking the taskbar corner overflow, turn on the switch for the application icon to be displayed. Method two: 1. We need to use a software to achieve this, search, download and install star by ourselves

Tutorial on how to set up glass effects on the Windows 11 taskbar Jan 05, 2024 pm 07:07 PM

In the win10 system, we can set the transparency effect, frosted glass effect, etc., so can we set the frosted glass effect in the win11 system? In fact, it is possible, but we need to use the functions of third-party software. Let’s follow the editor to take a look at the specific methods. How to set the win11 taskbar glass effect: 1. In the win11 system, we can only set the transparency effect, color and depth mode of the window. 2. Therefore, if you want to set up frosted glass special effects, you need to use third-party software. 3. First download a software called "classicshell" on the Internet. 4. After the download and installation is completed, you only need to open the software, find the "Taskbar" tab, and set the "frosted glass" feature in the appearance.

How to set the Win11 taskbar to be fully transparent? Detailed guide to setting up 100% transparency for the Win11 taskbar May 09, 2024 pm 01:22 PM

Windows 11 is the latest operating system launched by Microsoft. It adopts a new interface design and interaction method. Many users will habitually set the taskbar to be fully transparent. So how should they do it? Let’s take a look below! Basic settings 1. Right-click a blank space on the taskbar and select "Taskbar Settings". 2. In the "Personalization" tab, find the "Theme" option. 3. Scroll to the bottom and find the "Transparency" option. 4. Adjust the "Transparency" slider to the far right to set the taskbar to be fully transparent. The third-party tool Xiaozhi Eye Protection is an efficient eye protection software that effectively filters screen blue light. Compared with Eye Protection Wizard and Eye Protection Guardian, we provide a variety of eye protection color adjustments to meet the needs of color-sensitive groups at all times of the day. Eye protection requirements

See all articles