JS实现仿苹果底部任务栏菜单效果代码
更新时间：2015年08月28日 10:49:14 作者：企鹅
这篇文章主要介绍了JS实现仿苹果底部任务栏菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码。分享给大家供大家参考。具体如下：
这款仿苹果电脑的底部任务栏菜单，是纯JavaScript实现的菜单特效，鼠标放上有响应效果，菜单图标会变大，而且动画效果非常流畅，以前发过这种效果，但是是使用了jQuery实现的，今天这个没有jQuery插件哦。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-f-apple-buttom-nav-menu-style-codes/
具体代码如下：
<!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中数组方法汇总(推荐),需要的朋友可以参考下2015-04-04
这篇文章主要介绍了ES6 javascript中Class类继承用法,结合实例形式较为详细的分析了ES6继承的基本用法、相关属性、方法与使用技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了js实现全选反选不选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了js如何获取对象在数组中的index，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了JavaScript实现点击切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家详细介绍了微信小程序实现消息框弹出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
这篇文章主要介绍了微信小程序使用map组件实现检索(定位位置)周边的POI功能,涉及微信小程序基于map组件与高德地图PAI接口的定位操作相关使用技巧,需要的朋友可以参考下2019-01-01
严格模式就是使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。下面通过代码相结合的形式给大家介绍js中的严格模式，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要介绍了Webpack4 使用Babel处理ES6语法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家详细介绍了JS实现圆形进度条拖拽滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论