返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2020-05-23 06:04:15易采站长站整理

已经迫不及待的想要将我的最新成果分享给大家了，其实代码和之前的版本很相似。
首相是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”);

相关文章 大家在看