2013-11-30 2 views
3

Я новичок в этом мире кодирования. Мои знания HTML и CSS минимальны и несущественны, когда дело доходит до Javascript.Префиксы поставщиков для javascript

Я работаю над проектом, для которого мне нужно создать сайт параллакса, и каждый раздел разделен по диагонали. Бит параллакса почти закончен, но я изо всех сил стараюсь, чтобы диагонали функционировали в разных браузерах. Используя немного кода, который кто-то еще добавил в этот форум, я должен был сделать это для 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'); 
}); 
+0

Вы только с таргетингом на Мос свойство преобразования? Я предполагаю, что если вы измените moz на WebKit, он будет работать в хроме? – leaksterrr

+0

jQuery 1.8+ автоматически добавляет префиксы поставщиков. –

+0

Leaksterr, я пробовал это, но все еще не делаю этого ... –

ответ

1

Как Роб У. отметил, JQuery будет (в последних версиях) добавить префиксы для вас. Тем не менее, это означает, что вы не должны делать это сами:

$('section').css("transform", "rotate(" + angle + "deg)"); 

Это работает и в Chrome и Firefox для меня: Fiddle

Смежные вопросы