基于JQuery的模拟苹果桌面Dock效果(稳定版)
2023-06-13 09:14:40 时间
已经迫不及待的想要将我的最新成果分享给大家了,其实代码和之前的版本很相似。
首相是HTML页面代码:
复制代码代码如下:
首相是HTML页面代码:
<!DOCTYPEhtml>
<htmllang="zh-cmn-Hans-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jQueryDock</title>
<linktype="text/css"rel="stylesheet"href="css/dock.css"/>
<scripttype="text/javascript"src="js/jquery-1.8.0.js"></script>
<scripttype="text/javascript"src="js/dock.js"></script>
</head>
<bodyid="content">
<divid="topBody"align="center">
<divid="topMenu">
<ahref="#"><imgalt="Home"src="images/home.png"/></a>
<ahref="#"><imgalt="Music"src="images/music.png"/></a>
<ahref="#"><imgalt="Calendar"src="images/calendar.png"/></a>
<ahref="#"><imgalt="Email"src="images/email.png"/></a>
<ahref="#"><imgalt="Portfolio"src="images/portfolio.png"/></a>
<ahref="#"><imgalt="Video"src="images/video.png"/></a>
<ahref="#"><imgalt="Link"src="images/link.png"/></a>
<ahref="#"><imgalt="History"src="images/history.png"/></a>
<ahref="#"><imgalt="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);
}
#topMenuimg{
width:50px;
height:50px;
border:none;
}
对应的JS代码如下:
$(function(){
$(this).mousemove(function(e){
varmouseY=parseInt(e.pageY);
if(mouseY<136&&mouseY>8){
varmouseX=parseInt(e.pageX);
$("#topMenuimg").each(function(){
varobj=$(this);
varobjWidth=obj.css("width");
//获取图片中心水平坐标
varobjX=parseInt(obj.offset().left)+parseInt(objWidth.substr(0,objWidth.length-2))/2;
varx=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{
$("#topMenuimg").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数组反转「建议收藏」
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- vue和jQuery一起使用「建议收藏」
- 正在加载中-js/jQuery功能实现详解编程语言
- jQuery fancybox ie 无法显示关闭按钮详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery中delegate与on的用法与区别详解编程语言
- JQuery初体验(建议学习jquery)
- ASP.NET开发者使用jQuery应该了解的几件事情
- 锋利的jQuery要点归纳(三)jQuery中的事件和动画(上:事件篇)
- Jquery练习之表单验证实现代码
- Jquery知识点三jquery表单对象操作
- jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
- ie下jquery.getJSON的缓存问题的处理方法
- jQuery数据缓存功能的实现思路及简单模拟
- asp.net中js和jquery调用ashx的不同方法分享
- 模拟电子签章盖章效果的jQuery插件源码
- 解决jquery中美元符号命名冲突问题
- 用jQuery模拟select下拉框的简单示例代码
- jquery实现点击弹出层效果的简单实例
- 利用jquery动画特效和css打造的侧边弹出垂直导航
- jquery查找trtd示例模拟
- 使用JavaScript链式编程实现模拟Jquery函数
- 分享2个jQuery插件--jquery.fileupload与artdialog
- jQuery实现tag便签去重效果的方法
- 使用jquery操作session方法分享