Javascript 基于浏览器窗口大小旋转div_Javascript_Jquery_Css_Webkit

Javascript 基于浏览器窗口大小旋转div

javascript jquery css

Javascript 基于浏览器窗口大小旋转div,javascript,jquery,css,webkit,Javascript,Jquery,Css,Webkit,我是否可以使用下面的方法创建一个玻璃效果，并将其应用于宽度和高度均为100%的包含div？这意味着无论如何调整窗口大小，玻璃div的角始终随窗口移动 <!DOCTYPE html> <html lang="en"> <head> <title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

我是否可以使用下面的方法创建一个玻璃效果，并将其应用于宽度和高度均为100%的包含div？这意味着无论如何调整窗口大小，玻璃div的角始终随窗口移动

<!DOCTYPE html>
<html lang="en">
<head>

<title>Untitled</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css" media="screen">

body {
    margin: 0;
    padding: 0;
    background: #eee;
}

#container {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 200px;
    margin-left: -250px;
    left: 50%;
    background: #333;
}

#container .glass {
    position: absolute;
    width: 710px;
    height: 710px;
    top: -355px;
    left: -355px;
    background: #fff;
    opacity: 0.1;
    -webkit-transform:rotate(45deg);
}


</style>

</head>
<body>  
<div id="container">
    <div class="glass"></div>
</div>
</body>
</html>


无标题
身体{
保证金：0；
填充：0；
背景：#eee；
}
#容器{
宽度：500px；
高度：500px；
位置：绝对位置；
顶部：200px；
左边距：-250px；
左：50%；
背景：#333；
}
#容器，玻璃{
位置：绝对位置；
宽度：710px；
高度：710px；
顶部：-355px；
左：-355px；
背景：#fff；
不透明度：0.1；
-webkit变换：旋转（45度）；
}

我想你想要什么就做什么。我在计时器上设置了resize事件，因此它不会在调整大小时立即自动跟随。如果这很重要，您可以更改它，但不需要使用太多的处理能力，只需要每隔一段时间检查一次大小调整

下面是代码（如上所述的HTML）：

CSS

html{
身高：100%；
}
身体{
保证金：0；
填充：0；
背景：#eee；
身高：100%；
}
#容器{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：#333；
溢出：隐藏；
}
#容器，玻璃{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：#fff；
不透明度：0.1；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}

JavaScript（JQuery）

函数glassIt（）{
var g=$（“.glass”）；
var c=g.parent（）；
var w=c.宽度（）；
var h=c.高度（）；
var ext=[“-webkit-”、“-moz-”、“-o-”、“-ms-”]；
var angle=“旋转（“+（-1*（（数学阿坦（h/w））/（2*数学圆周率））*360）+“度”）；
g、 宽度（数学sqrt（数学功率（w，2）+数学功率（h，2））；
对于（i=0；i
function glassIt() {

    var g = $(".glass");
    var c = g.parent();
    var w = c.width();
    var h = c.height();
    var ext = ["-webkit-", "-moz-", "-o-", "-ms-"];
    var angle = "rotate("+(-1 * ((Math.atan(h/w))/(2*Math.PI))*360)+"deg)";

    g.width(Math.sqrt(Math.pow(w,2)+Math.pow(h,2)));

    for(i = 0; i <= ext.length; i++) {
        if(i < ext.length) {
            g.css(ext[i]+"transform", angle);
        }
        else {
            g.css("transform", angle);
        }
    }
}

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(glassIt, 100);
});

$(document).ready(function() {
  glassIt();
});