如何创建从左下角到右上角的动态对角线? [英] How to create dynamic diagonal line from left-bottom to right-top corner?

查看：16 发布时间：2022/1/4 18:45:38 javascript jquery dynamic responsive-design diagonal

本文介绍了如何创建从左下角到右上角的动态对角线?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

现在我有这个代码:

HTML:

<标题><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></标题><身体><div id="预加载器"><div id="blocktop"></div><div id="logo"></div><div id="loadline"></div><div id="blockbottom"></div>

CSS:

html{溢出:隐藏；}#预加载器{宽度:100%；高度:100%；}#标识{背景图片:url('../img/logotest.png');宽度:300px；高度:300px；显示:块；位置:固定；顶部:50%；左:50%；左边距:-150px；边距顶部:-150px；z-索引:1000；}#blocktop{背景颜色:#fff4ed；宽度:100%；高度:100%；位置:绝对；顶部:0px；左:-50%；z-索引:10；变换:倾斜(-45度)；-o-变换:倾斜(-45度)；-moz-transform: skew(-45deg);-webkit-transform: skew(-45deg);}#blockbottom{背景颜色:#ff7f33；宽度:100%；高度:100%；位置:绝对；底部:0px；右:-50%；变换:倾斜(-45度)；-o-变换:倾斜(-45度)；-moz-transform: skew(-45deg);-webkit-transform: skew(-45deg);}

jQuery:

$(document).ready(function(){/*$("按钮").click(function() */设置超时(功能(){$("#blocktop").animate({左:'-120%',不透明度:'0'}，800);$("#blockbottom").animate({右:'-120%',不透明度:'0'}，800);$('#logo').fadeOut('700')},2000);});

解决方案

使用三角函数计算所需的角度:

var angle = Math.atan2($(window).width(),$(window).height());//弧度$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

(数学极客和其他学究的注意:反正切通常采用高度除以宽度，而不是相反.然而，在这种情况下，我们正在倾斜垂直线而不是水平线，所以上面的代码给出了想要的结果.)

请注意，较新版本的 jQuery 会自动向该 CSS transform 属性添加必要的 -webkit- 或 -moz- 前缀.

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

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

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屋！

查看全文

如何创建从左下角到右上角的动态对角线? [英] How to create dynamic diagonal line from left-bottom to right-top corner?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何创建从左下角到右上角的动态对角线? [英] How to create dynamic diagonal line from left-bottom to right-top corner?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭