0

Добрый день.

Помогите разобраться, как решить проблему.

Задача: реализовать движение элемента containerMenu к бортам экрана при любом разрешении.

Сейчас код тоже работает, но я не могу понять, почему при изменении размера экрана он перестает корректно работать, т.е. сдвигается вправо или вниз от бортика экрана. Замечу, что изменение разрешение экрана дополняться обновлением страницы.

Прошу помощи, о Великие Гуру!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

<link href="style.css" type="text/css" rel="stylesheet" />
<title>Документ без названия</title>
</head>

<script>

    // отмена скролла

    document.onmousewheel = document.onwheel = function() {
        return false;
    };
    document.addEventListener ("MozMousePixelScroll",
    function() { return false }, false);
    document.onkeydown = function(e) {
        if (e.keyCode >= 33 && e.keyCode <= 40) return false;
    };

    //перемещение по экрану
    $(document).ready(function(){
        $("#creation").click(function(){
            $("#containerMenu").animate({marginLeft:"35%"},500);
            $("#containerMenu").animate({marginTop:-40},500);
            var angle = 0;
            setInterval(function(){
                if(angle != 315){
                    angle+=3;
                    $("#containerMenu").rotate(angle);
                }
            },10);
        });
        $("#service").click(function(){
            $("#containerMenu").animate({marginLeft:"35%"},500);
            $("#containerMenu").animate({marginTop:screen.height - 440},500);
            var angle = 0;
            setInterval(function(){
                if(angle != 45){
                    angle+=3;
                    $("#containerMenu").rotate(angle);
                }
            },10);
        });
        $("#promotion").click(function(){
            $("#containerMenu").animate({marginLeft:screen.width - 350},500);
            $("#containerMenu").animate({marginTop:screen.height - 710},500);
            var angle = 0;
            setInterval(function(){
                if(angle != 135){
                    angle+=3;
                    $("#containerMenu").rotate(angle);
                }
            },10);
        });
        $("#content").click(function(){
            $("#containerMenu").animate({marginLeft:-40},500);
            $("#containerMenu").animate({marginTop:screen.height - 710},500);
            var angle = 0;
            setInterval(function(){
                if(angle != 225){
                    angle+=3;
                    $("#containerMenu").rotate(angle);
                }
            },10);
        });
    });

</script>

<div id="containerMenu">
    <div id="service"><h1>обслуживание</h1></div>
    <div id="creation"><h1>создание</h1></div>
    <div id="promotion"><h1>продвижение</h1></div>
    <div id="content"><h1>контент</h1></div>
</div>
<body>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
* {
    padding:0px;
    margin:0px;
}
body{
    overflow: hidden;
} 
h1{
    color:#FF0;
    }
#containerMenu{

    position: absolute;
    border:10px solid #0F0;
    height:350px;
    width:350px;
    margin: 0px;
    margin-top: 15%;
    margin-left: 40%;
    z-index: 999;
    }

#service, #creation, #promotion, #content {
    border-bottom:5px solid red;
    width: 200px;
    text-align:center;
}

#service{
    position:relative;
    top: 70px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
#creation{
    position:relative;
    top: 28px;
    left:165px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
#promotion{
    position:relative;
    top: 150px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    }

#content{
    position:relative;
    top: 108px;
    left:165px;
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    }

2 ответа 2

1

1) Попробуй поместить html-код с контейнерами между тегами <body></body>

2) JQuery воспринимает перенос строки как окончание команды:

document.addEventListener ("MozMousePixelScroll", [тут перенос не нужен] function() { return false }, false);

Как-то так.

1
  • 1
    @densmith, может ссылочкой поделитесь, где сказано, что "JQuery воспринимает перенос строки как окончание команды"? А то [такие сомнения][1], что ночь спать не буду. [1]:jsfiddle.net/rss2my28
    – Deonis
    3 мар 2015 в 22:07
0
.toleft{
    left:0; /* Привязка блока к левой стороне страницы */
}
.toright{
    right:0; /* Привязка блока к правой стороне страницы */
}
.totop{
    top:0; /* Привязка блока к верхней стороне страницы */
}
.tobottom{
    bottom:0; /* Привязка блока к нижней стороне страницы */
}
.totop,.tobottom,.toleft,.toright{
    position:fixed;
}

Ваш ответ

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

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