根据浏览器窗口大小旋转div

Question

我可以使用以下方法创建玻璃效果并将其应用于宽度和高度均为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>

Answer 1

我觉得这把琴是您想要的。 我在计时器上设置了调整大小事件，因此它不会自动在调整大小后立即跟随。 您可以更改它，如果它很重要，但是可以避免使用那么多的处理能力来仅经常检查一次调整大小。

这是代码（如上所示的HTML）：

的CSS

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #eee;
    height: 100%;
}

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #333;
    overflow: hidden;
}

#container .glass {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.1;
    -webkit-transform-origin: 0 100% ;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

Javacript（JQuery）

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();
});

根据浏览器窗口大小旋转div

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-04-25 17:04:14

根据浏览器窗口大小旋转div

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-04-25 17:04:14

解决方案1
0 已采纳 2012-04-25 17:04:14