基于jQuery实现苹果Dock样式的菜单
爱编程小编之前我们分享过相当数量的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样式的菜单的更多相关文章
- 苹果Dock样式的菜单
在线演示 本地下载
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
- 基于jQuery和Bootstrap的手风琴垂直菜单
在线演示 本地下载
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
随机推荐
- kali系统安装图文教程
工具和原料 1.虚拟机:Oracle VM VirtualBox 下载地址:https://www.virtualbox.org/wiki/Downloads 根据你自己的计算机操作系统下载,其中如果 ...
- ESB服务号列表
用于以下两个网址: -浙商ESB调用规范- xml格式 -浙商ESB调用规范- json格式 ESB服务号<SERVICE_NO>{serviceNo} 接口中文意思 42000000 ...
- Configure the Struts Tag Libraries
In Struts framework, you always need to configure the Struts tag libraries in order to access it in ...
- spring properties resolve 问题
在stackoverflow上看到一个问题 配置如下: <context:property-placeholder location="/WEB-INF/application-cus ...
- ML 徒手系列 拉格朗日乘子法
拉格朗日乘子法是解决极值问题的方法. 本方法是计算多元函数在约束条件下的极值问题的方法. 1.多元函数与约束问题 如下图所示,f(x,y)为多元函数,g(x,y)=c为约束条件.目的是计算在约束条件下 ...
- Java 理论与实践: 非阻塞算法简介——看吧,没有锁定!(转载)
简介: Java™ 5.0 第一次让使用 Java 语言开发非阻塞算法成为可能,java.util.concurrent 包充分地利用了这个功能.非阻塞算法属于并发算法,它们可以安全地派生它们的线程, ...
- Java读取Properties文件的六种方法
使用J2SE API读取Properties文件的六种方法 1.使用java.util.Properties类的load()方法示例: InputStream in = lnew BufferedIn ...
- Linux下Hadoop集群环境的安装配置
1)安装Ubuntu或其他Linux系统: a)为减少错误,集群中的主机最好安装同一版本的Linux系统,我的是Ubuntu12.04. b)每个主机的登陆用户名也最好都一样,比如都是hadoop,不 ...
- linux TCP数据包重传过程----小结
于TCP/IP协议栈的TCP协议的重传功能是由在linux内核源码(net/ipv4/tcp_output.c)中的函数tcp_retransmit_skb()实现的 代码如下: /* This re ...
- android 简易时间轴(实质是ListView)
ListView的应用 1.在很多时候是要用到时间轴的,有些处理的时间轴比较复杂,这里就给出一个比较简单的时间轴,其实就是ListView里面的Item的设计. 直接上代码: ListView,ite ...