根據瀏覽器窗口大小旋轉div

我可以使用我在下面製作的方法創建玻璃效果，並將其應用於包含寬度和高度均爲100％的div？這意味着無論您如何調整窗口大小，玻璃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>

來源

2012-04-25 Ryan

This fiddle我覺得你想要什麼。我在一個定時器上設置了resize事件，所以它不會立即在調整大小後立即執行。如果它很重要，你可以改變它，但是它不會使用太多的處理能力來僅僅經常檢查調整大小。

下面的代碼（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(); 
});

來源

2012-04-25 17:04:14 ScottS

根據瀏覽器窗口大小旋轉div

回答

相關問題