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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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中iconv函数使用方法
2008/05/24 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python线程threading模块用法详解
2020/02/26 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
团拜会策划方案
2014/06/07 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
停电放假通知
2015/04/14 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle