JS实现仿苹果底部任务栏菜单效果代码


Posted in Javascript onAugust 28, 2015

本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码。分享给大家供大家参考。具体如下:

这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动画效果非常流畅,以前发过这种效果,但是是使用了jQuery实现的,今天这个没有jQuery插件哦。

运行效果截图如下:

JS实现仿苹果底部任务栏菜单效果代码

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 #Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 #Javascript
jQuery表单验证功能实例
Aug 28 #Javascript
You might like
PHP闭包(Closure)使用详解
2013/05/02 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python 函数基础知识汇总
2018/03/09 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
详解Python装饰器
2019/03/25 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python识别验证码图片实例详解
2020/02/17 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
人生感悟经典句子
2019/08/20 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Nginx四层负载均衡的配置指南
2021/06/11 Servers
python函数的两种嵌套方法使用
2022/04/02 Python