基于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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
Javascript玩转继承(三)
May 08 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
通俗易懂地解释JS中的闭包
Oct 23 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
js的Object.assign用法示例分析
Mar 05 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
小程序转发探索示例
2019/02/19 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Python numpy 点数组去重的实例
2018/04/18 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
HTML中的表单元素介绍
2022/02/28 HTML / CSS
keepalived + nginx 实现高可用方案
2022/12/24 Servers