爱编程小编之前我们分享过相当数量的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. adb device出现error:unknown host service

    最近在windows下使用adb device时,提示“ADB server didn't ACK” & “error: unknown host service”错误. 网上搜索了下,是说a ...

  2. 本人为项目组制定的一份页面优化指南(easyui页面优化方案)

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  3. scanf()/getchar()和gets()深入分析

    C/C++学习笔记1 - 深入了解scanf()/getchar()和gets()等函数 ---------------------------------------------------- | ...

  4. NServiceBus-性能测试

    NServiceBus: 有效地处理一个消息 处理大量并发 尺度大小不同的服务器 尺度低规格的设备 的最终平衡速度和安全. 基准 许多参数会影响测量性能.最明显的是硬件服务器和CPU核的数量,大小的内 ...

  5. 把数组A的奇数放在左边,偶数放在右边

    这也是一道面试题,是不是easy到爆,但是渣渣我面试时一点算法状态都没有 这道题和上一篇博客里那道题的解法一模一样 # include <iostream> using namespace ...

  6. CentOS6.5(带图形安装)在使用过程中遇到的一些网络问题迷惑

    比如,经常会遇到这样的问题************************** [root@SourceCompiler local]# pwd/usr/local[root@SourceCompil ...

  7. 如何判断Socket连接失效

    http://cuisuqiang.iteye.com/blog/1453632 ——————————————————————————————————————————————————————————— ...

  8. HDU 2040 亲和数 [补] 分类: ACM 2015-06-25 23:10 10人阅读 评论(0) 收藏

    今天和昨天都没有做题,昨天是因为复习太累后面忘了,今天也是上午考毛概,下午又忙着复习计算机图形学,晚上也是忘了结果打了暗黑3,把暗黑3 打通关了,以后都不会玩太多游戏了,争取明天做3题把题目补上,拖越 ...

  9. 理解js闭包(二)

    @(编程) 一.什么是闭包? 官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他 ...

  10. Android之旅 笔记总结(一)

    一.Android入门 1.          Android操作系统的体系结构分为4层,由上而下依次是应用程序.应用程序框架.核心类库(包括Android运行时环境)和Linux内核. 2.     ...