如何从左下角到右上角创建动态对角线？ [英] How to create dynamic diagonal line from left-bottom to right-top corner?
问题描述
我创建了一个简单的布局，我有三个div进行交互。一个是屏幕中间的标志，另一个是jQuery被移出屏幕的两个块。我使用CSS中的 skew 选项来应用度变换。我想根据屏幕应用一定程度，所以这个程度将适用于所有屏幕。
可视示例： http://jsfiddle.net/ 6a93T / 1 /
现在我有这个代码：
HTML：
< html>
< header>
< link rel =stylesheettype =text / csshref =css / reset.css>
< link rel =stylesheettype =text / csshref =css / style.css>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =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：
code> html {
overflow：hidden;
}
#preloader {
width：100％;
height：100％;
}
#logo {
background-image：url（'../ img / logotest.png'）;
width：300px;
height：300px;
display：block;
位置：固定;
顶部：50％;
剩余：50％;
margin-left：-150px;
margin-top：-150px;
z-index：1000;
}
#blocktop {
background-color：＃fff4ed;
width：100％;
height：100％;
position：absolute;
顶部：0px;
左：-50％;
z-index：10;
转换：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;
右：-50％;
转换：skew（-45deg）;
-o-transform：skew（-45deg）;
-moz-transform：skew（-45deg）;
-webkit-transform：skew（-45deg）;
}
jQuery：
$ b $（$（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
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（），$（窗口）.height（））; //以弧度
$（'＃blocktop，＃blockbottom'）。css（'transform'，'skew（ - '+ angle +'rad）'）;
（注意数学极客和其他脚步：反正切通常取高度d以宽度为单位，而不是相反，在这种情况下，我们倾斜垂直线而不是水平线，因此上述代码给出了所需的结果。）
请注意，较新版本的jQuery将自动添加必要的 -webkit - 或 -moz - 前缀你可能还想要 display：none
code>元素，直到上述代码可以改变角度，然后在角度计算后立即 show（）它们：
$（'＃blocktop，＃blockbottom'）css（'transform'，'skew（ - '+ angle +'rad）'）
。新增（ '＃标志'）显示（）。
http://jsfiddle.net/mblase75/6a93T/10/
I've created a simple layout where I have three divs which interact. One is the logo in the middle of the screen and the other are two blocks which with jQuery are moved out of the screen. I used the skew option from CSS to apply a degree transformation. I would like to apply the certain degree depending on the screen, so this degree will apply to all screens correctly.
Visual example: http://jsfiddle.net/6a93T/1/
For now I have this code:
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);
});
Use trigonometry to compute the desired angle:
var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');
(Note for math geeks and other pedants: the arctangent would normally take the height divided by the width, not the other way around. In this case, however, we're skewing a vertical line instead of a horizontal one, so the above code gives the desired result.)
Note that newer versions of jQuery will automatically add the necessary -webkit- or -moz- prefix to that CSS transform property.
You might also want to display:none the elements until the above code can alter the angle, and then show() them immediately after the angle is computed:
$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
.add('#logo').show();
http://jsfiddle.net/mblase75/6a93T/10/
这篇关于如何从左下角到右上角创建动态对角线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
