0

我是否可以使用我在下面制作的方法创建玻璃效果并将其应用于宽度和高度为 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>
4

1 回答 1

0

我认为这个小提琴可以满足您的需求。我在计时器上设置了调整大小事件，因此它不会在调整大小时立即自动跟随。如果它很重要，您可以更改它，但它有助于不使用尽可能多的处理能力来仅每隔一段时间检查一次调整大小。

这是代码（上面的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%;
}

Java脚本（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();
});
于 2012-04-25T17:04:14.663 回答