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

在线预览   源码下载

实现的代码。

html代码:

<div id="wrapper">
<img src="data:images/1.png" width="64">
<img src="data:images/2.png" width="64">
<img src="data:images/3.png" width="64">
<img src="data:images/4.png" width="64">
<img src="data: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样式的菜单的更多相关文章

  1. 苹果Dock样式的菜单

    在线演示 本地下载

  2. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  3. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

  4. 基于jQuery和Bootstrap的手风琴垂直菜单

    在线演示 本地下载

  5. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  6. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  7. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  8. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  9. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

随机推荐

  1. 30个有关Python的小技巧

    从我开始学习python的时候,我就开始自己总结一个python小技巧的集合.后来当我什么时候在Stack Overflow或者在某个开源软件里看到一段很酷代码的时候,我就很惊讶:原来还能这么做!,当 ...

  2. 'System.Web.Http.GlobalConfiguration' does not contain a definition for 'Configure'

    It needs the system.web.http.webhost which is part of this package. I fixed this by installing the f ...

  3. 轻松学习Linux之认识内存管理机制

    本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  4. windows2008 RDP修改默认端口

    PortNumber[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Teminal Sever\Wds\rdpwd\Tds\tcp] [HKE ...

  5. 第二百零七天 how can I坚持

    都这么一大把年纪了,还没正事,哎.. mysql ifnull(expr,expr),oracle nvl();去null函数. 每天也没什么事. 哎,每天 也总有那么点事. 刘松.李承杰,都是些什么 ...

  6. CF160D

    题意:给你一个图,判断每条边是否在最小生成树MST上,不在输出none,如果在所有MST上就输出any,在某些MST上输出at least one: 分析:首先必须知道在最小生成树上的边的权值一定是等 ...

  7. [iOS微博项目 - 3.2] - 发送微博

    github: https://github.com/hellovoidworld/HVWWeibo   A.使用微博API发送微博 1.需求 学习发送微博API 发送文字微博 发送带有图片的微博   ...

  8. ]用EnumChildWindows遍历窗口的方法

    最近项目有需要,得到一个非自己实现的窗口控件对象.于是想起曾经做过类似功能.总结如下: 调用EnumChildWindows(this->m_hWnd, EnumChildProc, NULL) ...

  9. 【转贴】Linux系统NGINX负载均衡404错误处理方法

    NGINX负载均衡404错误处理方法 使用NGINX 实现负载均衡,但一组服务器的数据不是实施同步,主服务器有了数据要过段时间才同步到其他服务器 upstream   image.stream.com ...

  10. Mahalanobis Distance(马氏距离)

    (from:http://en.wikipedia.org/wiki/Mahalanobis_distance) Mahalanobis distance In statistics, Mahalan ...