您的位置：首页 > Web前端 > JavaScript

js简单仿苹果菜单图片效果

2012-07-05 23:04 344 查看

DEMO演示：

点我点我点我

思路：通过计算鼠标与图片的位置来设定图片的大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿苹果菜单</title>
<style type="text/css">
#menu li{float:left; list-style: none; margin-left: 5px;}
#menu{ display: inline-block;}
body{ text-align: center;}
</style>
</head>
<body>
<ul id="menu">
<li><img src="images/01.png" alt="" width="100" height="100"></li>
<li><img src="images/02.png" alt="" width="100" height="100"></li>
<li><img src="images/03.png" alt="" width="100" height="100"></li>
<li><img src="images/04.png" alt="" width="100" height="100"></li>
<li><img src="images/05.png" alt="" width="100" height="100"></li>
<li><img src="images/06.png" alt="" width="100" height="100"></li>
<li><img src="images/07.png" alt="" width="100" height="100"></li>
<li><img src="images/08.png" alt="" width="100" height="100"></li>
<li><img src="images/09.png" alt="" width="100" height="100"></li>
</ul>
<script type="text/javascript">
Tool = {
$:function(selector,context){
var elements,returnEle = [];
var context = context || document;
var sub = selector.substring(1);
if (typeof(selector) == 'string'){
switch(selector.charAt(0)) {
case '#':
return document.getElementById(sub);
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
elements = context.getElementsByTagName('*');
for(var i= 0,n=elements.length;i<n;i++){
if(elements[i].className.indexOf(sub)>-1){
returnEle.push(elements[i]);
}
}
return returnEle;
default:
return context.getElementsByTagName(selector);
}
}
},
on:function(node, type, handler) {
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
}
};

// 获取节点的中心点坐标位置
function getCenterPos(ele){
var x = ele.offsetLeft, y = ele.offsetTop;
var width = ele.offsetWidth, height = ele.offsetHeight;
while(ele.offsetParent){
ele = ele.offsetParent;
x += ele.offsetLeft;
y += ele.offsetTop;
}

x = x + width/2;
y = y + height/2;

return [x,y];
}

// 在每个li节点中记录自己的位置
function appleMenu(id){
var ul = document.getElementById(id);
var lis = ul.getElementsByTagName('li');
for(var i= 0,n=lis.length;i<n;i++){
lis[i].pos = getCenterPos(lis[i]);
}
return lis;
}

// 设置事件
Tool.on(document,'mousemove', function(event){
// 获取鼠标的x，y位置
var pageX = event.pageX;
var pageY = event.pageY;
var dis;
var lis = appleMenu('menu');
for(var i = 0,n = lis.length; i < n; i++){
// 计算鼠标与节点的距离
dis = Math.sqrt(Math.pow(pageX - lis[i].pos[0],2) + Math.pow(pageY-lis[i].pos[1],2));
// 根据鼠标与节点的距离来计算图片的宽高
if(dis<=200){
// 图片大小与鼠标距离的关系可以用二次函数（抛物线）来表示，鼠标在图片中心的时候图片最大（即dis为0的时候图片最大）
// 我们设置最大值为200，那么抛物线经过（0，200）这个点，然后鼠标移动距离越远，图片大小越小，可以自己设定
// 距离为多大的时候，图片恢复默认大小，比如设置为200，则抛物线经过（200,100）这个点，这样就可以求出
// y = ax^2 + bx 中的a 和 b 的值，详情见此贴http://www.cnblogs.com/NNUF/archive/2012/05/28/2522541.html
// 即求出图片大小鼠标位置的关系的公式即可
Tool.$('img',lis[i])[0].height = Tool.$('img',lis[i])[0].width = 200 - 0.002*Math.pow(dis,2);
}else{
// 恢复默认大小
Tool.$('img',lis[i])[0].height = Tool.$('img',lis[i])[0].width = 100;
}
}
})

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航