Движение элемента к бортам экрана при любом разрешении

223

12 декабря 2016, 10:17

Добрый день.

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

Задача: реализовать движение элемента 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);
    }