基于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 ...
随机推荐
- Codeforces Educational Codeforces Round 15 C. Cellular Network
C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- 多台服务器最好加上相同的machineKey
<machineKey validationKey="6E993A81CF4BDCA1C1031528F55DADBB8AF1772A" decryptionKey=&q ...
- 如何调试最新的asp.net mvc源码
vs2013调试 一.源码当前为5.2.0.0,按下面改为5.0.0.1 二./web.config 版本为5.0.0.0 改为5.0.0.1 三.vs2013 x86 本机工具命令提示 sn.exe ...
- SCP和SFTP(转)
原文:http://www.cnblogs.com/wang_yb/p/3819441.html 不管SCP还是SFTP,都是SSH的功能之一.都是使用SSH协议来传输文件的. 不用说文件内容,就是登 ...
- Axis2在Web项目中整合Spring
一.说明: 上一篇说了Axis2与Web项目的整合(详情 :Axis2与Web项目整合)过程,如果说在Web项目中使用了Spring框架,那么又改如何进行Axis2相关的配置操作呢? 二.Axis2 ...
- C++11模板的别名
[C++模板的别名] 参考:http://zh.wikipedia.org/wiki/C++0x#.E6.A8.A1.E6.9D.BF.E7.9A.84.E5.88.A5.E5.90.8D
- POJ1463 Strategic game (最小点覆盖 or 树dp)
题目链接:http://poj.org/problem?id=1463 给你一棵树形图,问最少多少个点覆盖所有的边. 可以用树形dp做,任选一点,自底向上回溯更新. dp[i][0] 表示不选i点 覆 ...
- UITextFiled,UIButton,UIImageView交互相互之间的事件拦截
UIButton右上方添加一个笑button如: UIButton *button =[UIButton buttonWithType:UIButtonTypeCustom]; button.f ...
- php二叉树算法
二叉树的每个结点至多只有二棵子树(不存在度大于2的结点),二叉树的子树有左右之分,次序不能颠倒.二叉树的第i层至多有2^{i-1}个结点:深度为k的二叉树至多有2^k-1个结点:对任何一棵二叉树T,如 ...
- Apache服务器配置默认首页文件名和网站路径
默认首页的配置: 第一种:直接修改apache服务器的配置文件./conf/httpd.conf中的DirectoryIndex,如:(项目web以index.php为首页) <IfModule ...