-1

Скажем мягко я в javascript не бох, а точнее я новичёк совсем... В общем Я почти ни чего и не знаю, Я пытался сделать чтобы после загрузки страници элементы плавно появлялись один за другим. Но я понятия не имею как сделать задержку в 0.5с и как изменить -ms-transform:rotateY(30deg); на -ms-transform:rotateY(0deg);... Может быть я всё неправильно делаю и возможно сделать по другому? Вот код и стили странички :

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript">
            function Div(){
                var message = "myAnyMessage";
                    function applyNewStyles() {
                        /* операции изменения стилей*/
                        menu.style["-webkit-transform"] = "rotateY(0deg) !important";
                    }

                    doApplyNew = function(e) {
                    if (e.data === message && e.source === window) {
                        window.removeEventListener('message', doApplyTo, false);
                        applyNewStyles();
                    }
                };

                window.addEventListener('message', doApplyNew, false);
                window.postMessage(message, '*');

                var W=window.innerWidth - 200;
                var H=window.innerHeight - 50;
                document.getElementById('Content').style.height=H+"px";
                document.getElementById('Content').style.width=W+"px";
                document.getElementById('Content').style.opacity=1;

                document.getElementById('SidebarLeft').style.height=H+"px";
                document.getElementById('SidebarLeft').style.opacity=1;
                document.getElementById('SidebarLeft').style.left=0;

                document.getElementById('Head').style.opacity=1;
                document.getElementById('Head').style.top=0;

                document.getElementById('menu').style["-webkit-transform"] = "rotateY(0deg) !important";

            }

            function right(){
                var W=window.innerWidth - 200;
                var H=window.innerHeight - 50;
                var Content=document.getElementById('Content');
                Content.style.height=H+"px";
                Content.style.width=W+"px";
                document.getElementById('SidebarLeft').style.height=H+"px";
            }
        </script>
    </head>
    <body onLoad="Div()">
        <div id='Head'>
        </div>
        <div id='SidebarLeft'>
            <div id='wrapper'>
                <div id='Menu'>
                    Меню
                </div>
            </div>
        </div>
        <div id='Content'>
            <div>

            </div>
        </div>
    </body>
</html>

input, textarea {outline:none;}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    background: fixed #fff url(../images/bg.jpg) center center no-repeat;
    text-decoration: none;
    font-family: "helvetica neue", helvetica, arial, sans-serif;
    font-size: 12px;
    overflow: hidden;
    -webkit-perspective: 100%;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.4);
}

#Content, #head, #SidebarLeft {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#head {
    width: 100%;
    height: 50px;
    position: absolute;
    top: -50px;
    float: left;
    opacity: 0;
    background: rgba(0,132,255,.9);
}

#Content {
    width: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: rgba(0,0,0,0.7);
    overflow-x: hidden;
    overflow-y: scroll;
}

#SidebarLeft {
    width: 200px;
    height: 100%;
    position: absolute;
    left: -200px;
    bottom: 0;
    float: left;
    opacity: 0;
    background: rgba(255,255,255,0.9);
}

#wrapper {
    width: 200px;
    height: 30PX;
    -webkit-perspective: 200px;
}

#menu {
    width: 200px;
    height: 30px;
    margin:  0 0;
    float: left;
    opacity: 1;
    background: rgba(0,0,0,0.9);

    transform:rotateY(30deg);
    -o-transform:rotateY(30deg);
    -webkit-transform:rotateY(115deg);
    -moz-transform:rotateY(30deg);
    -ms-transform:rotateY(30deg);

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;

    -webkit-transform-origin: left center;
}

1 ответ 1

2

Я ж говорю, надо регистр учитывать!

<body onLoad="Div()">

onLoad маленькими надо писать! Плюс что я еще говорил: надо стили трансформации НЕ в CSS указывать. В вашем случае код получится более сложным, что никому не надо.

И конечно у вас ничего не получится потому что вы просто закопипастили некоторые мои советы. Допустим, вы не сделали так, чтобы нужная ф-я по перемене стиля трансформации выполнялась через пол секунды. Для этого просто надо было найти в гугле соответствующую ф-ю (setTimeout).

menu.style["-webkit-transform"] = "rotateY(0deg) !important";

Тут "menu" - ссылка на html-объект

menu = document.getElementById('Menu');
//!!! В HTML у вас Menu c большой буквы, стало быть, надо и тут писать!
//Посмотрите что у вас в примере.

Еще я не увидел что у вас вызывает функцию right. Она по ходу мертвая в коде.

В общем на пару ошибок я вам указал, а остальное никто за вас делать не будет. Так что вперед! Пробуйте, учитесь, теорию читайте.

Еще советую функции и id объектов писать с маленькой буквы.

3
  • Непонял. Где мне стили то указывать если не в css?
    – Kirpich643
    14 ноя 2012 в 14:42
  • Ну вы что же это так? :) В html-тэге есть параметр "style". Туда и вносите! Например "style='color: red;'" 15 ноя 2012 в 17:33
  • Понял спсибо:)
    – Kirpich643
    16 ноя 2012 в 14:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.