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

    CUDA简介 CUDA是并行计算的平台和类C编程模型,我们能很容易的实现并行算法,就像写C代码一样.只要配备的NVIDIA GPU,就可以在许多设备上运行你的并行程序,无论是台式机.笔记本抑或平板电脑 ...

  2. iOS打开手机QQ与指定用户聊天界面

    开发中遇到一个联系客服qq的需求,找到这么一个实现方法,先记录下来.大概的原理就是,iOS启动第三方应用是采用schema模式的,这有点像url,打开不同的界面使用不同的地址.但这个url怎么得来的还 ...

  3. T-SQL 变量

    T-SQL变量 变量的种类: 在T-SQL中,变量按生存范围可以分为全局变量(Global Variable)和局部变量(Local Variable) 1.全局变量是由系统定义的,在整个SQL Se ...

  4. 第三百二十七天 how can I 坚持

    都没心情学习了,睡觉.太失败了.  好了,你赢了,最怕女人不说话了,我妈一生气就不说话,有点怕我妈,你想删就把我删了吧,我不怪你. 给你个善意的建议,任何事情都要有度,过犹而不及,你是属于那种比较听家 ...

  5. FATFS文件系统

    STM32移植文件系统,操作SD卡,对SD卡进行读写 FATFS文件系统与底层介质的驱动分离开来,对底层介质的操作都要交给用户去实现,它仅仅是提供了一个函数接口而已,函数为空,要用户添加代码.然后 F ...

  6. Labview中局部变量和全局变量

    局部变量的作用域是整个VI,它用于在单个VI中传输数据: 全局变量的作用域是整台计算机,它主要用于多个VI之间共享数据

  7. 第三次作业之Calculator项目随笔

    附:Github的链接:https://github.com/mingyueanyao/object-oriented/tree/master/Calculator 1.初见题目: 第一眼看到题目最大 ...

  8. Codeforces 706 D. Vasiliy's Multiset (字典树贪心)

    题目链接:http://codeforces.com/contest/706/problem/D 题意很简单不多说. 把一个数当作二进制插入字典树中,按照xor的性质,1找0,0找1,贪心即可. 注意 ...

  9. 粗解Xcode 5新特性: Asset Catalogs

    原文:http://schlu.org/2013/10/01/Xcode-Asset-Catalogs.html 基础知识 在今年的WWDC大会上苹果介绍了Asset Catalogs.Asset C ...

  10. ACM数学问题分类(汇总帖)

    数论 组合数学 计算几何 博弈论 线性代数 高等数学 线性规划 概率统计