基于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 ...
随机推荐
- python用法笔记(数组(list、touple、dict)、字符串)
1.产生n个全为1的数组a=[1]*n2.字符数字转化int('12')float('12.5')str(123.45)ASCII码转为相应的字符:chr(97)字符转化为相应的ASCII码:ord( ...
- 如何开启php报错
今天碰到一个很二的问题,安装了php网站之后,发现nginx一直无法解析到index.php文件,显示为空白,从后台的日志来看是500错误,但是同目录下的phpinfo.php却可以正常解析.想来应该 ...
- searchBar 隐藏
searchBar 隐藏 CGRect newBounds = self.tableView.bounds; newBounds.origin.y = newBounds.origin.y + _he ...
- 消除QQ表情小游戏
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- datagrid url json
<div class="easyui-accordion" style="width:500px;height:300px;"> <div t ...
- 使用CXF发布WebService服务简单实例
一.说明: 前面介绍了使用axis2来发布Webservice服务,现在介绍一种更popular,更高效的Webservice服务发布技术:CXF Apache CXF = Celtix + XFir ...
- quartz 的job中获取到applicationContext
第一步: 定义SchedulerFactoryBean的applicationContextSchedulerContextKey <bean name="scheduler" ...
- git会议分享
git add . git add -A git add common.scss 只迁入某个文件 git pull h5 远程的:分支 这样就成功拉取一个新分支了 git push h5(远 ...
- PHP高级应用视频教程大全学习
php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么?最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据,生 ...
- 28.怎样在Swift中实现单例?
1.回忆一下OC中的单例实现 //AFNetworkReachabilityManager中的单例,省略了其他代码 @interface AFNetworkReachabilityManager : ...