jquery推开窗户3D特效代码

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

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

以下是 jquery推开窗户3D特效代码的示例演示效果:

当前平台(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=gb2312">
<title>jquery推开窗户3D特效</title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="main">
  <div id="pic"><img src="images/1.png" /></div>
  <div id="fire"><img src="images/torch.png" /></div>
  <div id="tips">3D Effect
    <div id="big">only</div>
    supported by webkit</div>
  <div class="wood window" >
    <div class="left">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="right">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
</div>

<script src="js/jquery-1.7.min.js"></script>
<script>
$(function(){
		if($.browser.webkit){
				$(".window").hover(function(){
					$(".left,.right").addClass("hover");					
										},function(){
					$(".left,.right").removeClass("hover");										 
			   }) 
		 }
		 else{
			 $(".window").hover(function(){
					$(".left,.right").animate({"marginTop":-300},200)		
										},function(){
					$(".left,.right").animate({"marginTop":0},200)									 
			   }) 
		 }
})
</script>
</body>
</html>

CSS代码(css.css):

@charset "utf-8";<!--*{margin:0;padding:0;}
body{background:url(../images/brick.jpg);}
.clear{clear:both;}
.main{position:absolute;width:1024px;height:auto;}
.wood{display:block;border:15px outset #C60;margin:120px auto 0 auto;overflow:hidden;box-shadow:3px 3px 4px #000;}
.window{background:url(../images/night.JPG) 30% center;width:400px;height:600px;box-shadow:6px 6px 4px #000;border:15px inset #C60;cursor:pointer;-webkit-perspective:900;-webkit-transform-style:preserve-3d;-webkit-transition-property:perspective;-webkit-transition-duration:0.4s;}
.left,.right{width:200px;height:600px;box-shadow:none;-moz-box-shadow:0 3px 10px #888;-webkit-box-shadow:0 3px 10px #888;-webkit-transition:0.4s ease-in-out;}
.left{float:left;margin-left:0;-webkit-transform:rotateY(0deg);}
.right{float:right;margin-rihgt:0;-webkit-transform:rotateY(0deg);}
.left.hover{-webkit-transform:scale(0.9) rotateY(60deg);margin-left:-36px;}
.right.hover{-webkit-transform:scale(0.9) rotateY(-60deg);margin-right:-36px;}
.bar{background:rgba(255,255,255,0.3);background:-webkit-radial-gradient(center,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 90%);background:-moz-radial-gradient(center,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 90%);background:radial-gradient(center,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 90%);float:left;width:180px;height:180px;border:10px outset #C60;}
#pic img{width:230px;height:300px;position:absolute;top:160px;left:20px;box-shadow:4px 4px 4px #000;}
#fire{position:absolute;top:80px;right:40px;}
#tips{position:absolute;top:300px;right:0px;font:40px Verdana,Geneva,sans-serif;color:#FFC;width:200px;margin:40px;text-shadow:0 0 10px #FF9;line-height:50px;}
#big{font-size:50px;text-align:center;}
p,p a{font-size:12px;color:#666;}
/* 酷站代码整理 http://www.5icool.org */

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