以下是 jQuery+CSS3模拟WIN8卡片式UI特效代码 的示例演示效果:
部分效果截图:
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>Imitative WIN8 WEB UI</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Imitative WIN8 WEB UI</h1>
<div id="start"><img src="images/MS WINDOWS 7.A.png" width="64"/></div>
</div>
<div id="startMenu">
<ul>
<li><img src="images/HOME.png" />HOME</li>
<li><img src="images/TASKS_A.png" />TASKS</li>
<li><img src="images/TOOLS.png" />TOOLS</li>
<li><img src="images/SEARCH.png" />SEARCH</li>
<li><img src="images/PLAYER.png" />PLAYER</li>
</ul>
</div>
<div class="container">
<!--***************
<div class="toolset">
<img class="tool" src="images/search.jpg">
<img class="tool" src="images/order.jpg">
<img class="tool" src="images/news.jpg">
<img class="tool" src="images/ask.jpg">
</div>
****-->
<div class="boxgridSet">
<!--****************slidedown****************-->
<div class="box slidedown">
<div class="search" style="display:none">
<label>INPUT</label><input type="text" />
</div>
<div class="boxgrid ">
<h3>SEARCH</h3>
<div class="content">
<p>info, mes, ads</p>
<img src="images/map.jpg" width="300px" height="200px"/>
</div>
</div>
</div>
<!--**************** slideright****************-->
<div class="box slideleft">
<div class="news" style="display:none"></div>
<div class="boxgrid" style="background:#B0EB17">
<h3>SETTING</h3>
<div class="content" style="background:#B0EB17">
<p>Photographer<br/><a href="#/" target="_BLANK"></a></p>
<img src="images/SETTINGS.png"style="margin:30px" />
<img src="images/pointer.png" style="margin:50px 200px " />
</div>
</div>
</div>
<div class="box right">
<img id="target" src="images/FILE - MOVIE.png" />
<img id="coffee" src="images/INTERNET EXPLORER - ALT.png" />
</div>
<!--**************** thecombo****************-->
<div class="box slideright">
<div class="news2" style="display:none">
</div>
<div class="boxgrid" style="background:#39AB3E";>
<h3>CONTACT</h3>
<div class="content" style="background:#39AB3E">
<p>Graphic Designer<br/><a href="#" target="_BLANK">More Info</a></p>
<img id="me" src="images/me.gif" />
<img src="images/BLUETOOTH.png" style="margin:-10px 90px;" />
</div>
</div>
</div>
<!--**************** peek****************-->
<div class="box">
<div class="boxgrid peek" style="background:#8F2145">
<a href="#"><img src="images/birss.jpg"/></a>
<a href="#"><img class="cover" src="images/facebook.gif"/></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</div>
</body>
<script type="text/javascript" src="script/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="script/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script/script.js"> </script>
</html>
JS代码(script.js):
/*! * jQuery JavaScript Library v1.5.1 * * Copyright 2011,Ziyang Zhang * * Copyright 2011,ZZY * Date:Wed Feb 23 13:55:29 2011 -0500 */
$(document).ready(function(){
//slidedown Effect$('.slidedown').hover(function(){
$('.search').show();
$(this).children().animate({
top:'30'}
,{
queue:false,duration:500}
);
}
,function(){
$(this).children().animate({
top:'0'}
,{
queue:false,duration:500}
);
$('.search').hide();
}
);
//slideleft Effect$('.slideleft').hover(function(){
$(this).children().animate({
left:'-150'}
,{
queue:false,duration:160}
);
$('.news').show();
}
,function(){
$(this).children().animate({
left:'0'}
,{
queue:false,duration:160}
);
$('.news').hide();
}
);
//slideright Effect$('.slideright').hover(function(){
$(this).children().animate({
left:'140'}
,{
queue:false,duration:160}
);
$('.news2').show();
}
,function(){
$(this).children().animate({
left:'0'}
,{
queue:false,duration:160}
);
$('.news2').hide();
}
);
//startMenu Effect$('#start').toggle(function(){
$(this).addClass('click');
$('#startMenu').slideDown(110);
$('.container').addClass('small');
}
,function(){
$(this).removeClass('click');
$('#startMenu').slideUp(110);
$('.container').removeClass('small');
}
);
}
);
$(document).ready(function(){
//Partial Sliding (Only show some of background)$('.boxgrid.peek').hover(function(){
$(".cover",this).stop().animate({
top:'90px'}
,{
queue:false,duration:160}
);
}
,function(){
$(".cover",this).stop().animate({
top:'0px'}
,{
queue:false,duration:160}
);
}
);
}
);
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
/***********************CSS RESET*********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/***********************CSS OVERRIDE*********************/
body{background:url(../images/bluebg.png) #041623;margin:0;padding:0;font-family:Georgia,"Times New Roman",Times,serif;font-size:14px;}
h1{color:#FFF;line-height:90px;margin:0 90px;font-family:"微软雅黑","幼圆"Arial,sans-serif;font-size:48px;font-weight:500;}
.header h1{color:#FFF;line-height:70px;margin:0 90px;font-family:Arial,sans-serif;font-size:48pxfont-weight:500;}
.boxgrid h3{margin:10px 10px 0 10px;color:#FFF;font-family:"微软雅黑","幼圆",Arial,sans-serif;font-size:32px;letter-spacing:5px;font-weight:300;cursor:pointer;}
a:link,a:visited{color:#3D464B;text-decoration:none;}
a:hover,a:active{color:#BD0A01;text-decoration:underline;}
/***********************Framework*********************/
.wrapper{width:100%;margin:0 auto;height:auto;}
.header{background-color:#1999D7;width:100%;margin:0 auto;height:70px;-webkit-box-shadow:#1999D7 0 0 30px;-moz-box-shadow:#1999D7 0 0 30px;-o-box-shadow:#1999D7 0 0 30px;}
.container{width:970px;margin:10px auto;height:auto;min-height:500px;-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);}
.container:hover{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);}
.container.small{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);}
.clear{clear:both;}
.footer{background-color:#1999D7;width:100%;margin:10px auto 0;height:0px;}
/**********************BOXES*********************/
.box{width:300px;height:260px;margin:12px;float:left;background:#FF9000;overflow:hidden;position:relative;cursor:pointer;}
.boxgrid{width:300px;height:260px;background:#1999D7;overflow:hidden;position:relative;cursor:pointer;}
.boxgrid img{position:absolute;border:0;}
.boxgrid p{padding:0 10px;color:#afafaf;font-weight:bold;font:10pt "Lucida Grande",Arial,sans-serif;}
.boxcaption{float:left;position:absolute;background:#000;height:100px;width:100%;opacity:.7;/* For IE 5-7 */
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);/* For IE 8 */
-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}
.captionfull .boxcaption{top:260;left:0;}
.caption .boxcaption{top:220;left:0;}
.title{padding:5px;}
.content{background-color:#1999D7;width:100%;height:90%;}
.search{width:200px;height:50px;margin:30px;}
.news{float:right;}
.search input{height:30px;width:240px;margin:10px auto;line-height:30px;font:24px "微软雅黑","幼圆",Arial,sans-serif;}
.search label{line-height:30px;font:26px "微软雅黑","幼圆",Arial,sans-serif;color:#FFF;}
.right{background:#FCD208;margin:10px;float:right;width:300px;height:545px;}
#target{width:200px;height:200px;margin:30px 50px;}
#coffee{width:200px;height:200px;margin:50px;}
#me{width:90px;height:90px;margin:0 10px;}
#coffee:hover,#target:hover{cursor:pointer;}
#start{position:absolute;top:5px;right:80px;color:#FFF;font-family:Arial,sans-serif;font-size:32px;font-weight:500;cursor:pointer;}
#start.click{position:absolute;top:7px;right:78px;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-o-transform:scale(0.95);}
#startMenu{position:absolute;top:72px;right:15px;background-color:#1999D7;width:230px;height:510px;z-index:5;display:none;}
#startMenu ul{background:#1999D7;width:230px;}
#startMenu li{height:60px;line-height:60px;vertical-align:middle;padding:10px 10px;color:#FFF;font-family:"微软雅黑","幼圆",Arial,sans-serif;font-size:24px;font-weight:500;text-align:center;cursor:pointer;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;}
#startMenu li:hover{background:#FF9000;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);}
#startMenu img{width:50px;height:50px;margin:-10px 10px;cursor:pointer;}
分享到QQ
分享到微博
微信扫一扫
