jQuery+CSS3模拟Mac OS界面特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3模拟Mac OS界面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>launchPad</title> 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
</head> 
 
<body class="blur"> 

      <div id="launchpad">
          <!--***************************   Row 1   ***********************************-->
          <div class="icon"><img src="mac/safari.png" title="safari"/><span></span></div>
          <div class="icon"><img src="mac/Mail.png" title="Mail" /><span></span></div>
          <div class="icon"><img src="mac/Appstore.png" title="Appstore" /><span></span></div>
          <div class="icon"><img src="mac/Pages.png" title="Pages" /><span></span></div>
          <div class="icon"><img src="mac/Numbers.png" title="Numbers" /><span></span></div>
          <div class="icon"><img src="mac/Keynote.png" title="Keynote" /><span></span></div>
          <div class="icon"><img src="mac/Aperture.png" title="Aperture" /><span></span></div>
          <div class="icon"><img src="mac/AddressBook.png" title="AddressBook"/><span></span></div>
          <!--***************************   Row 2   ***********************************-->
          <div class="icon"><img src="mac/iCalendar.png" title="iCalendar" /><span></span></div>
          <div class="icon"><img src="mac/FaceTime.png" title="FaceTime" /><span></span></div>
          <div class="icon"><img src="mac/iPhoto.png" title="iPhoto" /><span></span></div>
          <div class="icon"><img src="mac/iMovie.png" title="iMovie" /><span></span></div>
          <div class="icon"><img src="mac/GarageBand.png" title="GarageBand" /><span></span></div>
          <div class="icon"><img src="mac/Djay.png" title="Djay" /><span></span></div>
          <div class="icon"><img src="mac/iTunes.png" title="iTunes" /><span></span></div>
          <div class="icon"><img src="mac/PhotoBooth.png" title="PhotoBooth" /><span></span></div>
          <!--***************************   Row 3   ***********************************-->
          <div class="icon"><img src="mac/Dashboard .png" title="Dashboard" /><span></span></div>
          <div class="icon"><img src="mac/Compartments.png" title="Compartments" /><span></span></div>
          <div class="icon"><img src="mac/Developer.png" title="Developer"/><span></span></div>
          <div class="icon"><img src="mac/Pixelmator.png" title="Pixelmator" /><span></span></div>
      </div>
      
      
      <div id="dock"> 
          <img src="mac/Finder.png" title="Finder" />
          <img src="mac/Appstore.png" title="Appstore" />
          <img src="mac/Mail.png" title="Mail" />
          <img src="mac/safari.png" title="safari"/>
          <img src="mac/FaceTime.png" title="FaceTime" />
          <img src="mac/AddressBook.png" title="AddressBook"/>
          <img src="mac/iCalendar.png" title="iCalendar" />
          <img src="mac/iTunes.png" title="iTunes" />
          <img src="mac/PhotoBooth.png" title="PhotoBooth" />
          <img src="mac/iPhoto.png" title="iPhoto" />          
      </div> 
      
      <div class="title"></div>
      <img src="mac/launchpad.png" title="launchpad"  class="launch"  />    

</body> 
</html> 

<script src="script/jquery-1.7.min.js"></script>
<script src="script/common.js"></script>

JS代码(common.js):

// JavaScript Document$(function(){
	var oMenu = document.getElementById('dock');
	var aImg = oMenu.getElementsByTagName('img');
	var iWid = 128;
	var iWidth = 64;
	var i = 0;
	var posLeft=0;
	var posTop=0;
	var flag = false;
	var scale = "scale(1)";
	$('body').removeClass("blur");
	var left = $(window).width() - $('#dock img').size()*70;
	$('#dock').css({
	"margin-left":left/2}
);
	$(window).resize(function(){
	var size = $(window).width();
	if(size<1024){
	flag = true;
}
else{
	flag = false;
}
left = $(window).width() - $('#dock img').size()*70;
	$('#dock').css({
	"margin-left":left/2}
);
}
);
	for(i=0;
	i<aImg.length;
	i++){
	aImg[i].width = iWidth;
}
//$('img').css({
	"width":iWidth}
);
	$('*').mousemove(function(e){
	if(flag){
}
else{
	var oEvent = e || event;
	for(i=0;
	i<aImg.length;
	i++){
	var imgX = aImg[i].offsetLeft + oMenu.offsetLeft+ aImg[i].offsetWidth / 2;
	var imgY = aImg[i].offsetTop + oMenu.offsetTop + aImg[i].offsetHeight / 2;
	var a = imgX - oEvent.clientX;
	var b = imgY - oEvent.clientY;
	var c = Math.sqrt(a*a+b*b);
	var scale = 1 - c / 300;
	if(scale<0.5){
	scale=0.5;
}
aImg[i].width = Math.ceil(iWid * scale);
}
}
}
);
	$('.icon').each(function(){
	var title = $(this).children('img').attr('title');
	$(this).children('span').html(title);
}
)$('#dock img').hover(function(){
	posLeft= $(this).offset().left;
	var icon = $(this).attr("title");
	$('.title').css({
	"left":posLeft,"bottom":135}
).html(icon).show();
}
,function(){
	$('.title').hide();
}
)$('#dock img').click(function(){
	if(flag){
}
else{
	flag = true;
	var y =90;
	$(this).animate({
	"margin-bottom":90}
,200,vibrant);
}
function vibrant(){
	if(y>5){
	y-=y*0.45 $(this).animate({
	"margin-bottom":0}
,90) .animate({
	"margin-bottom":y}
,90,vibrant);
}
else{
	$(this).animate({
	"margin-bottom":0}
) flag = false;
}
}
}
)$(".launch").toggle(function(){
	scale = "scale(1)";
	zoom();
	$('body').css({
	"background":"url(mac/galaxyblur.jpg)"}
);
	$("#launchpad").fadeTo(300,1);
}
,function(){
	scale = "scale(0.9)";
	zoom();
	$('body').css({
	"background":"url(mac/galaxy.jpg)"}
);
	$("#launchpad").fadeTo(100,0);
}
)function zoom(){
	$("#launchpad").css({
	"-ms-transform":scale,"-webkit-transform":scale,"-moz-transform":scale,"-o-transform":scale}
);
}
$(".close").click(function(){
	$(".note").fadeOut(300);
}
)}
);

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
body{background:url(../mac/galaxy.jpg);background-position:center top;background-repeat:no-repeat;margin:0px;padding:0px;overflow:hidden;}
.blur{background:url(../mac/galaxyblur.jpg);}
#dock{background:url(../mac/dock.png) no-repeat bottom;width:auto;bottom:0;text-align:center;position:fixed;cursor:pointer;padding:5px 20px;}
#dock img{margin:2px -2px;/*opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);*/
}
#launchpad{margin:20px auto;width:980px;height:700px;border-radius:30px;display:block;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transition:0.2s ease-in-out;}
.icon{background:url(mac/shadow.png) no-repeat left center;float:left;width:60px;height:80px;margin:20px 40px;cursor:pointer;}
.icon:hover{opacity:0.6;}
#launchpad img{height:50px;height:50px;margin:5px;}
.icon span{float:left;width:60px;height:10px;margin:5px auto;display:block;color:#FFF;font-size:10px;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;text-align:center;line-height:10px;text-shadow:0 1px 2px #000000;}
img.launch{display:block;position:fixed;bottom:0;right:0;margin:5px;cursor:pointer;}
.title{background:#333;background:rgba(0,0,0,0.7);position:absolute;display:none;bottom:0;right:0;width:90px;height:20px;border-radius:8px;color:#FFF;padding:2px;line-height:20px;text-align:center;font-size:12px;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
.note{position:absolute;left:30%;top:35%;padding:10px;padding-top:0;background:#FFF046;background:rgba(255,240,70,0.9);width:40%;height:auto;box-shadow:0px 5px 10px #333;box-shadow:0px 5px 10px rgba(0,0,0,0.5);font-family:"微软雅黑";text-align:center;filter:alpha(opacity=90);opacity:1;}
.note h3{letter-spacing:6px;}
.close{float:right;margin:-14px -24px;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)