基于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 相关文章推荐
Javascript this指针
Jul 30 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
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
浅析php中jsonp的跨域实例
2013/06/21 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
浅谈js闭包理解
2019/03/28 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
小程序新版订阅消息模板消息
2019/12/31 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python常量折叠基础知识点讲解
2021/02/28 Python
美国时尚在线:Showpo
2017/09/08 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
迎八一活动主题
2014/01/31 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
班主任寄语大全
2014/04/04 职场文书
重阳节简报
2015/07/20 职场文书