您的位置:首页 > Web前端 > JQuery

基于jQuery实现苹果Dock样式的菜单

2015-01-30 00:00 931 查看
爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了。效果图如下:



在线预览 源码下载
实现的代码。
html代码:

<div id="wrapper">
    <img src="images/1.png" width="64">
    <img src="images/2.png" width="64">
    <img src="images/3.png" width="64">
    <img src="images/4.png" width="64">
    <img src="images/5.png" width="64">
</div>


js代码:

window.onload=function(){
           document.onmousemove=function(ev){
               var oevent=ev||event;
               var aimg=document.getElementsByTagName('img');
               var odiv=document.getElementById('wrapper');
               for(var i=0;i<aimg.length;i++){
                      var x=aimg[i].offsetLeft+aimg[i].offsetWidth/2;
                      var y=aimg[i].offsetTop+odiv.offsetTop+aimg[i].offsetHeight/2;
                      var a=x-oevent.clientX;
                      var b=y-oevent.clientY;
                      var dis=parseInt(Math.sqrt(a*a+b*b));
                      var scale=1-dis/200;
                    if(scale<0.5){
                        scale=0.5;
                    }
                    aimg[i].width=scale*128;

               }
           }
        }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: