<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
</head>
<body>
<div id="content" class="clear">
<div class = "jersey_skin">
<div class="jersey">
<div id = "skin_block">
<img src="images/kvadrat.jpg" id="skin_cell">
<div id="block_resize"></div>
<div id="block_turnover"></div>
</div>
</div>
<div class="skin_control">
<div class="turn_right"></div>
<div class="turn_left"></div>
</div>
</div>
<div class="skin_border">
<img src = "images/avatar.png" class="skin">
<img src = "images/face.jpg" class="skin">
<img src = "images/kaban.png" class="skin">
<img src = "images/piratskaja_stantsija.jpg" class="skin">
<img src = "images/stalker.jpg" class="skin">
<img src = "images/warface.png" class="skin">
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
#content{
min-width:1000px;
min-height: 500px;
margin: 100px auto;
width: 30%;
height: auto;
border-radius: 5px;
border: 1px solid gray;
}
.clear::after{
content:"";
display: block;
clear: both;
}
.jersey_skin, .skin_border{
min-width: 300px;
min-height: 460px;
width:30%;
height: 70%;
border-radius: 5px;
display: inline-block;
}
.jersey_skin{
float: left;
margin: 20px 0 0 130px;
}
.skin_border{
float: right;
margin: 20px 130px 0 0;
}
.jersey{
position: relative;
min-width: 200px;
min-height: 350px;
background:url(images/jersey.jpg) no-repeat;
background-size: 100% 100%;
}
#skin_block{
width: 120px;
height: 100px;
position: absolute;
top:90px;
left: 88px;
border: 1px solid red;
}
#skin_cell{
width: 100%;
height: 100%;
}
.skin_control{
width: 72px;
margin: 30px auto;
}
.skin_control div{
width: 34px;
height: 34px;
display:inline-block;
cursor:pointer;
background-size: 100% 100%;
}
.turn_left{
background: url(images/turnleft.jpg);
}
.turn_right{
background: url(images/turnright.jpg);
}
.resize{
background: url(images/resize.jpg);
}
.resize_in{
background: url(images/resizein.jpg);
}
.up{
background: url(images/up.jpg);
}
.down{
background: url(images/down.jpg);
}
.skin{
height: 120px;
width: 146px;
border: 1px solid gray;
border-radius: 10px;
display: inline-block;
background-size: 100% 100%;
cursor: pointer;
}
#block_resize, #block_turnover{
width: 0;
height: 0;
position: absolute;
}
#block_resize{
border: 2px solid black;
border-right:2px solid transparent;
border-bottom:2px solid transparent;
cursor: se-resize;
left: 95%;
top:94%;
}
#block_turnover{
left: 97%;
top:96%;
border: 2px solid grey;
border-left:2px solid transparent;
border-top:2px solid transparent;
cursor: nesw-resize;
}
//для того чтобы подгружалась сначала DOM-структура а потом функция исполнения
window.addEventListener("DOMContentLoaded",init);
window.addEventListener("DOMContentLoaded",mainBlock);
//--------------подгрузка скина при клике--------------------
function init(){
// взяли блок в котором будет отображаться скин
var blockSkin = document.getElementById("skin_cell");
// взяли img-блоки со скинами
var skin = document.getElementsByClassName("skin");
/*делаем цикл чтобы перебрать массив skin и вытащить каждый элемент img,а затем вешаем обработчик нажатия на каждый img и в функции прописываем чтоб при нажатии src blockSkin-а был такой-же как и у выбранного img (skin[i])*/
for(var i = 0;i<skin.length;i++){
skin[i].addEventListener("click", function(){
blockSkin.src = this.src;
});
}
}
//---------------ресайз,перемещение,поворот-------------------
var ff = 0;
var op = 0;
var ie = 0;
var chr = 0;
var skinBlock; // Основной блок
var skinResize; // Div для изменения размеров
var resizeWidth = 0; // Изменение по ширине
var resizeHeight = 0; // Изменение по высоте
// Функция определения браузера
function mainBlock(){
var browser = navigator.userAgent;
if(browser.indexOf("opera") !=-1) op = 1;
if(browser.indexOf("chrome") !=-1) chr = 1;
if(browser.indexOf("MSIE") !=-1) ie = 1;
if(browser.indexOf("Forefox") !=-1) ff = 1;
skinBlock = document.getElementById("skin_block"); // Получаем основной блок
skinResize = document.getElementById("block_resize");// Получаем Div для изменения размеров
document.onmouseup = clearXY; // Ставим обработку на отпускание кнопки мыши на document(уменьшение-увеличение размера)
skinResize.onmousedown = setXY; // Ставим обработку на нажатие кнопки мыши на растягивание-стягивание
}
//-------------------ресайз для блока skin-cell----------------------
// Функция для получения текущих координат курсора мыши
function getXY(pos){
if(pos){
x = pos.pageX; // координаты x,y относительно документа(не известно)
y = pos.pageY;
}else{
x = window.event.clientX; //x,y относительно рабочей области окна
y = window.event.clientY;
}
return new Array(x,y); // возвращаем массив координат относительно рабочей области окна
}
// функция которая отработает при обработке на нажатие кнопки мыши
function setXY(pos){
var point = getXY(pos); //вернулся массив координат[x,y]
var skinBlock_W = skinBlock.clientWidth; // Текущая ширина основного блока
var skinBlock_H = skinBlock.clientHeight; // Текущая высота основного блока
resizeWidth = skinBlock_W - point[0];// Измеряем текущую разницу между шириной основного блока и x-координатой мыши
resizeHeight = skinBlock_H - point[1];// Измеряем текущую разницу между высотой основного блока и y-координатой мыши
/* Ставим обработку движения мыши на документ */
document.onmousemove = resizeBlock;
//прописываем чтобы отменить всплытие события и не отработало перемещение блока(т.е. событие на window)
event.stopPropagation();
//вешаем на документ обработчик события на движение мыши на разных браузерах
if(ie || ff) document.addEventListener("onmousemove", resizeBlock, false);//ставим 3-м арг. fаlse чтоб отловить событие при всплытии с помощью event.stopPropagation();
if(op || chr) document.addEventListener("onmousemove", resizeBlock, false);
return false;// Отключаем стандартную обработку нажатия мыши skinResize.onmousedown, чтобы не было конфликтов обработчиков,так как мы использовали в качестве обработчика функцию setXY.
}
/* Функция для измерения ширины окна */
function clientWidth(){
return document.documentElement.clientWidth == 0 ? document.body.clientWidth : document.documentElement.clientWidth;
}
/* Функция для измерения высоты окна */
function clientHeight(){
return document.documentElement.clientHeight == 0 ? document.body.clientHeight : document.documentElement.clientHeight;
}
/* При отпускании кнопки мыши отключаем обработку движения курсора мыши */
function clearXY(){
document.onmousemove = null;
}
function resizeBlock(pos){
var point = getXY(pos); // вернули массив x,y
var new_w = resizeWidth + point[0]; // Изменяем на новое значение по ширине
var new_h = resizeHeight + point[1];// Изменяем на новое значение по высоте
skinBlock.style.width = new_w + "px";// Устанавливаем новую ширину блока
skinBlock.style.height = new_h + "px";// Устанавливаем новую высоту блока
/* Если блок выходит за пределы экрана, то устанавливаем максимальные значения для ширины и высоты */
if (skinBlock.offsetLeft + skinBlock.clientWidth > clientWidth()) skinBlock.style.width = (clientWidth() - skinBlock.offsetLeft) + "px";
if (skinBlock.offsetTop + skinBlock.clientHeight > clientHeight()) skinBlock.style.height = (clientHeight() - skinBlock.offsetTop) +"px";
// ##### проверка изменения координат(для себя) #####
console.log(point[0] + "," + point[1] + "," + resizeWidth + "," + resizeHeight + "," + new_w + "," + new_h);
}
