如何创建从左下角到右上角的动态对角线

我创建了一个简单的布局，其中我有三个div交互。一个是屏幕中间的徽标，另一个是两个使用jQuery移出屏幕的块。我使用CSS中的skew选项来应用度转换。我想根据屏幕应用一定的度数，这样这个度数就可以正确地应用于所有的屏幕。

可视化示例: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)');

(对于数学爱好者和其他书呆子来说:arctan通常是高度除以宽度，而不是相反。)然而，在本例中，我们倾斜了一条垂直线而不是一条水平线，因此上面的代码给出了期望的结果。

请注意，新版本的jQuery将自动添加必要的-webkit-或-moz-前缀的CSS transform属性。

您可能还想要display:none元素，直到上面的代码可以改变角度，然后在计算出角度后立即show()它们:

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

http://jsfiddle.net/mblase75/6a93T/10/

我只是使用了这样一个事实:一个DOM-Element在顶部和右侧有两个不同的边框，结果在两者相交的对角线上。然后将DOM-Element的高度和宽度设置为0,border-top-width设置为window-height, border-right-width设置为window-width。用JavaScript在调整大小上更新它…就是这样。

我在DOM中放了一个容器

<div id="diagonal_outer"><div id="diagonal"></div></div>

下面的CSS是必要的

div#diagonal_outer {
    position: fixed !important;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
}
div#diagonal {
    position: relative;
    border-color: #FAE9E1 #ffffff;
    border-style: solid;
    border-left-width: 0;       
    border-top-width: 10240px;
    border-right-width: 12800px;
    border-bottom-width: 0;
    height: 0;
    width: 0;
    left: 50%;
    top: 50%;
    margin-left: -6400px; /* half of border-right-width */
    margin-top: -5120px; /* half of border-top-width */
    z-index: -100;
}

和下面的JavaScript来实现on resize

jQuery(document).ready(function() {
    diagonal();
});
jQuery(window).resize(function() {
    diagonal();
});
var diagonal = function() {
    var wWidth = jQuery(window).width();
    var wHeight = jQuery(window).height();
    jQuery('#diagonal').css('left', 0);
    jQuery('#diagonal').css('top', 0);
    jQuery('#diagonal').css('margin-left', 0);
    jQuery('#diagonal').css('margin-top', 0);
    jQuery('#diagonal').css('border-right-width', wWidth);
    jQuery('#diagonal').css('border-top-width', wHeight);
};

好的，使用CSS-skew的解决方案很好，但是这个解决方案适用于CSS <3

您不需要为此做太多。看这里的演示

<div class="diagonal"></div>

CSS

.diagonal { width: 0; height: 0; border-top: 110px solid transparent; border-right:110px solid blue; }

相关内容

最新更新

热门标签：