码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-02-02 14:00:10      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

爱编程小编之前我们分享过相当数量的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;

               }
           }
        }

via:http://www.w2bc.com/Article/19605

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

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4267595.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!