您的位置：首页 > 其它

滑动菜单

2015-08-17 16:21 387 查看

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>appleMenu</title>

<style type="text/css">

body{margin:0px auto;padding:0px auto;}

#menuBar{width:100%;height:70px;position:absolute;bottom:0px;text-align: center;}

#menuBar img{width:70px;height:70px;margin:5px 10px;}

</style>

<script type="text/javascript">

window.onload=function(){

var oMenu=document.getElementById('menuBar');

var aImg=oMenu.getElementsByTagName('img');

document.onmousemove=function(ev){

var ev=ev||event;

for(var i=0;i<aImg.length;i++){

var x=aImg[i].offsetLeft+aImg[i].style.width/2;

var y=aImg[i].offsetTop+aImg[i].style.height/2+oMenu.offsetTop;

var a=ev.clientX-x;

var b=ev.clientY-y;

var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2));

var size=1-c/300;

if(size<0.5){

size=0.5;

}

aImg[i].style.width=size*125+'px';

aImg[i].style.height=size*125+'px';

}

}

}

</script>

</head>

<body>

<div id="menuBar">

<img src="../images/1.jpg">

<img src="../images/2.jpg">

<img src="../images/3.jpg">

<img src="../images/4.jpg">

<img src="../images/5.jpg">

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航