我是一名新手,对编码这个世界还不熟悉。我对HTML和CSS的了解很少,当涉及到Javascript时就更无从下手了。
我正在做一个项目,需要创建一个视差网站,每个部分都被对角线划分。视差效果基本完成了,但我在尝试让这些对角线在不同的浏览器上都能正常使用时遇到了麻烦。用别人在论坛中发布的一些代码,我已经实现了Firefox的支持,但仍然需要让其在其他浏览器上运行,至少要支持Chrome和Safari。有人能帮忙吗?
HTML
我正在做一个项目,需要创建一个视差网站,每个部分都被对角线划分。视差效果基本完成了,但我在尝试让这些对角线在不同的浏览器上都能正常使用时遇到了麻烦。用别人在论坛中发布的一些代码,我已经实现了Firefox的支持,但仍然需要让其在其他浏览器上运行,至少要支持Chrome和Safari。有人能帮忙吗?
HTML
<div>
<section><a href="#1"></a></section>
<section><a href="#2"></a></section>
</div>
CSS
html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative; }
section {
height : 500%;
background : red;
width : 500%;
position : absolute;
top : -100%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
section + section {
background: #333;
top : 80%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
section a { display: block; width: 100%; height: 100%; cursor: pointer; }
JS
$(function() {
$(window).on('resize', function() {
var h = $(document).height(),
w = $(document).width();
var angle = ((Math.atan(h/w) * 10.29577951308232));
$('section').css("-moz-transform", "rotate(" + angle + "deg)")
})
.triggerHandler('resize');
});