基于JQuery模仿苹果桌面的Dock效果(初级版)


Posted in Javascript onOctober 15, 2012

新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定。由于时间的关系,这些bug还没有修复,希望高手们不吝赐教,提出更好的意见,希望可以做出更好的版本分享给大家。

这是静态的效果图,好吧,看上去还想模像样

基于JQuery模仿苹果桌面的Dock效果(初级版)

下面是HTML页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQueryProject1</title> 
<meta name="author" content="Frank_Ren" /> 
<link type="text/css" rel="stylesheet" href="css/myCSS.css" /> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" language="JavaScript" src="js/myJSFile.js"></script> 
<!-- Date: 2012-09-17 --> 
</head> 
<body> 
<div id="topBody" align="center"> 
<p id="topMenu" align="center"> 
<img alt="Home" src="images/home.png" /> 
<img alt="Music" src="images/music.png" /> 
<img alt="Calendar" src="images/calendar.png" /> 
<img alt="Email" src="images/email.png" /> 
<img alt="Portfolio" src="images/portfolio.png" /> 
<img alt="Video" src="images/video.png" /> 
<img alt="Link" src="images/link.png" /> 
<img alt="History" src="images/history.png" /> 
<img alt="RSS" src="images/rss.png" /> 
</p> 
</div> 
</body> 
</html>

没有CSS装饰的页面那叫一个惨不忍睹,所以使用适当的CSS进行装饰是必不可少的
#topBody{ 
height: 300px; 
} 
#topMenu{ 
height: 256px; 
line-height: 256px; 
} 
#topMenu img{ 
height: 50px; 
width: 50px; 
}

才毕业几个月,解方程都忘记了,所以当鼠标移动时图标的放大算法让我很头疼啊,这里给出的算法只是个人想法,仅供参考,希望各位高手提出更好的算法。而且这里只考虑了鼠标在水平位置移动时的算法,还没有加入鼠标垂直移动式的算法。
$(function(){ 
$("#topBody").mousemove(function(e){ 
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 && x>-75){ 
obj.css("width",(128-((78*x*x)/(75*75)))+"px"); 
obj.css("height",(128-((78*x*x)/(75*75)))+"px"); 
} 
}); 
}); 
});

说说JQuery获取鼠标的方法,当执行mousemove(function(e){})这个方法是,方法的参数e提供了e.pageX获取水平坐标、e.pageY获取垂直坐标,同时也可以使用var x = e.originalEvent.x || e.originalEvent.layerX || 0;获取鼠标的水平位置、同样可以用 var y = e.originalEvent.y || e.originalEvent.layerY || 0;获取鼠标的垂直位置。

 

基于JQuery模仿苹果桌面的Dock效果(初级版)

当鼠标移动速度比较慢时显示效果还可以接受,不过当鼠标快速移动时时图标是放大了,不过相应的bug也出来了。

基于JQuery模仿苹果桌面的Dock效果(初级版)

恳请各位走过路过的高手、大神们,提出宝贵的修改意见及更好的算法,谢谢观赏。

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
JSON取值前判断
Dec 23 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery事件用法详解
Oct 06 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
Javascript webpack动态import
Apr 19 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
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
You might like
How do I change MySQL timezone?
2008/03/26 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python中partial()基础用法说明
2018/12/30 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python+requests接口自动化框架的实现
2020/08/31 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
物理力学求职信
2014/02/18 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
永远是春天观后感
2015/06/12 职场文书
员工规章制度范本
2015/08/07 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书