基于JQuery的模拟苹果桌面Dock效果(稳定版)


Posted in Javascript onOctober 15, 2012

已经迫不及待的想要将我的最新成果分享给大家了,其实代码和之前的版本很相似。

首相是HTML页面代码:

<!DOCTYPE html> 
<html lang="zh-cmn-Hans-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jQuery Dock</title> 
<link type="text/css" rel="stylesheet" href="css/dock.css" /> 
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script type="text/javascript" src="js/dock.js"></script> 
</head> 
<body id="content"> 
<div id="topBody" align="center"> 
<div id="topMenu"> 
<a href="#"><img alt="Home" src="images/home.png" /></a> 
<a href="#"><img alt="Music" src="images/music.png" /></a> 
<a href="#"><img alt="Calendar" src="images/calendar.png" /></a> 
<a href="#"><img alt="Email" src="images/email.png" /></a> 
<a href="#"><img alt="Portfolio" src="images/portfolio.png" /></a> 
<a href="#"><img alt="Video" src="images/video.png" /></a> 
<a href="#"><img alt="Link" src="images/link.png" /></a> 
<a href="#"><img alt="History" src="images/history.png" /></a> 
<a href="#"><img alt="RSS" src="images/rss.png" /></a> 
</div> 
</div> 
</body> 
</html>

同样加上相应的CSS代码:
#topMenu{ 
height:128px; 
line-height:250px; 
width: 630px; 
background-image:url(../images/dock-bg1.png); 
} 
#topMenu img{ 
width: 50px; 
height:50px; 
border:none; 
}

对应的JS代码如下:
$(function(){ 
$(this).mousemove(function(e){ 
var mouseY = parseInt(e.pageY); 
if(mouseY<136 && mouseY>8){ 
var mouseX = parseInt(e.pageX); 
$("#topMenu img").each(function(){ 
var obj = $(this); 
var objWidth = obj.css("width"); 
//获取图片中心水平坐标 
var objX = parseInt(obj.offset().left) + parseInt(objWidth.substr(0,objWidth.length-2))/2; 
var x = Math.abs(objX-mouseX); 
if(x<75){ 
obj.css("width",(128-((78*x*x)/(75*75)))+"px").css("height",(128-((78*x*x)/(75*75)))+"px"); 
}else{ 
obj.css("width","50px").css("height","50px"); 
} 
}); 
}else{ 
$("#topMenu img").each(function(){ 
$(this).css("width","50px").css("height","50px"); 
}); 
} 
}); 
});

相比于之前的版本最大的改变还是在JS上面,当鼠标在页面上移动时触发mousemove事件,在mousemove方法中首先取得鼠标在页面上的垂直坐标,判断鼠标是否在可操作dock菜单的垂直范围之内,如果鼠标不在这个范围之内,就将所有图标还原到初始状态;相反,如果鼠标在这个范围之内,就继续获取鼠标在页面上的水平坐标,并用mouseX来记录。同时获取图片中心在页面中的水平坐标,用objX来保存相应的值,当mouseX与objX之差的绝对值(用x来记录)小于75时,就进入了当前图片的可操作范围,dock效果就会触发,用y来表示当鼠标移动时某一张图片的width(为了简单本次示例使用的图标width和height相等的),本次示例用了方程 y=128-78*x2/752来表示鼠标的位置与图片尺寸之间的关系,当 x 的大于75时就将对应的图片还原。
在本次示例的过程中发现了一个 ie 的一个小 bug ,当 <a> 标签中间的内容为 <img /> 时如果没有给 img 的 border 的任何CSS样式,则 ie 会给 img 加上蓝色边框,即使给 <a> 标签加上 text-decoration: none; 的CSS样式,img 仍然会被 ie 加上蓝色边框,当给 img 添加 border:none; 之后烦人的蓝色边框就不见了。下图是改进过后版本的演示图,所有代码仅供参考,谢谢阅读。
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Javascript 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
原生js实现购物车
Sep 23 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 #Javascript
JS自动缩小超出大小的图片
Oct 12 #Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 #Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
You might like
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
javascript读写json示例
2014/04/11 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
用Python实现一个简单的线程池
2015/04/07 Python
Python三级目录展示的实现方法
2016/09/28 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
民事答辩状格式范文
2015/05/21 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
入门学习Go的基本语法
2021/07/07 Golang