基于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 ...
随机推荐
- Java基础 —— 面向对象
面向对象的程序设计: 1. 基本特征:抽象性,封装性,继承性,多态性. 2. 类及成员的访问控制:private:同一类中: default:同一包中: protected:子类中: public:全 ...
- 《The Google File System》论文阅读笔记——GFS设计原理
一.设计预期 设计预期往往针对系统的应用场景,是系统在不同选择间做balance的重要依据,对于理解GFS在系统设计时为何做出现有的决策至关重要.所以我们应重点关注: 失效是常态 主要针对大文件 读操 ...
- [札记]IL经典指令解析之方法调度
call.callvirt和calli指令用于完成方法调用,有何区别呢? 1)call使用静态调度,也就是根据引用类型的静态类型来调度方法.call指令根据引用变量的类型来调用方法,因此通常用于调用非 ...
- SharePoint咨询师之路:设计之前的那些事一:容量
提示:本系列只是一个学习笔记系列,大部分内容都可以从微软官方网站找到,本人只是按照自己的学习路径来学习和呈现这些知识. 咨询师更多的时候是解决方案提供者,那么他们如何能够提供有效的SharePoint ...
- netdata linux环境下的安装
据说netdata监控很个性化,采用的显示方式也很漂亮,就来尝试安装.百度搜索到的安装教程的斑斑是1.0.顺藤摸瓜去wiki看了看,已经更新为1.4了,果断走起: 下载地址::https://gith ...
- 常见的mongo shell命令
启动mongo shell 在windows下,双击mongo.exe可以启动mongo shell 查询库.表及选择库 查询所有库命令: show dbs 应用某一个db use jxs_datab ...
- KextWizard 的使用方法;以及Kext安装的几种工具下载
a.将你需要安装的Kext拖到非中文的路径中: b.运行该软件,将Kext拖入下图对应的方框里,然后选择位置安装: c.选择修复权限和重建缓存(一个是修复Extra文件夹,一个是修复SLE) Kext ...
- 用 Python 脚本实现对 Linux 服务器的监控
目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件).glances(资源监控工具)在实际工作中,Linux 系统 ...
- does not support ASP.NET compatibility 错误
The service cannot be activated because it does not support ASP.NET compatibility. ASP.NET compatibi ...
- 【转】android onNewIntent()触发机制及注意事项
一.onNewIntent() 在IntentActivity中重写下列方法:onCreate onStart onRestart onResume onPause onStop onDestro ...