我创建了一个简单的布局，其中有三个可以交互的 div。一个是屏幕中间的徽标，另一个是使用 jQuery 将两个块移出屏幕。我用的是skewCSS 中应用度数转换的选项。我想根据屏幕应用一定的程度，因此该程度将正确应用于所有屏幕。
视觉示例：http://jsfiddle.net/6a93T/1/ http://jsfiddle.net/6a93T/1/
现在我有这个代码：
HTML:
<html>
<header>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jq.animation.js"></script>
</header>
<body>
<div id="preloader">
<div id="blocktop"></div>
<div id="logo"></div>
<div id="loadline"></div>
<div id="blockbottom"></div>
</div>
</body>
</html>
CSS:
html{
overflow: hidden;
}
#preloader{
width: 100%;
height: 100%;
}
#logo{
background-image: url('../img/logotest.png');
width: 300px;
height: 300px;
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 1000;
}
#blocktop{
background-color: #fff4ed;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: -50%;
z-index: 10;
transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}
#blockbottom{
background-color: #ff7f33;
width: 100%;
height: 100%;
position: absolute;
bottom: 0px;
right: -50%;
transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}
jQuery:
$(document).ready(function(){
/*$("button").click(function() */
setTimeout(function(){
$("#blocktop").animate({
left: '-120%',
opacity: '0'},
800
);
$("#blockbottom").animate({
right: '-120%',
opacity: '0'},
800
);
$('#logo').fadeOut('700')
},2000);
});
使用三角学计算所需的角度：
var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');
（数学极客和其他学究请注意：反正切通常采用高度除以宽度，而不是相反。但是，在这种情况下，我们倾斜的是垂直线而不是水平线，因此上面的代码给出了想要的结果。）
请注意，较新版本的 jQuery 将自动添加必要的-webkit- or -moz-该 CSS 的前缀transform财产。
您可能还想display:none元素直到上面的代码可以改变角度，然后show()计算角度后立即进行：
$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
.add('#logo').show();
http://jsfiddle.net/mblase75/6a93T/10/ http://jsfiddle.net/mblase75/6a93T/10/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
