Форум

izbash · #1 (**permalink**) 11.10.2013, 08:05

Здравствуйте!

Пишу скрипт, который будет изменять угол положения изображения и обрезать ее. Возникла проблема на стадии "вращения" (rotate).

HTML:

<body>
  <img id="img" src="http://f4.s.qip.ru/V4IuUgU2.jpg" width="400px" height="250px">
  <main>
  <fieldset>
    <legend>Rotate</legend>
    <input id="input" oninput="rotatePic()" type="range" min="1" max="9" step="1" value="1">
  </fieldset>
</main>    
</body>

CSS:

Код:

html {
  background-color:rgb(83,151,171);}

main {
  position:absolute;}

img {
  position:absolute;
  border:5px solid white;
  border-radius:10px;
  margin:15% 30%;}

JS:

function rotatePic() {
    
     var inputValue, img, transform;
     inputValue = document.getElementById("input").value;
     img = document.getElementById("img");
     transform = img.style.webkitTransform;
  
    switch (inputValue) {
      case 2: transform = "rotate(45deg)";
      case 3: transform = "rotate(90deg)";
      case 4: transform = "rotate(135deg)";
      case 5: transform = "rotate(180deg)";
      case 6: transform = "rotate(225deg)";
      case 7: transform = "rotate(270deg)";
      case 8: transform = "rotate(315deg)";
      case 9: transform = "rotate(360deg);"
    default: inputValue = 0;} 
      
}

ksa · #2 (**permalink**) 11.10.2013, 08:44

izbash, ты внимательно почитай как работает switch...

А особенно это место

Цитата:

При этом равенство подразумевается в смысле оператора "===", сравнивать с регулярным выражением или как-то еще switch не умеет.

http://javascript.ru/switch

ksa · #3 (**permalink**) 11.10.2013, 08:48

izbash, еще...
Такая конструкция

transform = img.style.webkitTransform;
...
transform = "rotate(45deg)";

Чистая бессмыслица... Это не "крутнет".

Делай так челе...

transform = "rotate(45deg)";
...
img.style.webkitTransform=transform;

BETEPAH · #4 (**permalink**) 11.10.2013, 08:50

Так же внимательно присмотритесь на той же странице к "Пример: switch без break"

izbash · #5 (**permalink**) 11.10.2013, 09:17

Огромная вам благодарность!

Поменял JS:

function rotatePic() {
    var inputValue, img;
    inputValue = document.getElementById("input").value;
    img = document.getElementById("img");
  switch (inputValue) {
    case "1": img.style.webkitTransform = ""
      break
    case "2": img.style.webkitTransform = "rotate(45deg)"
      break
    case "3": img.style.webkitTransform = "rotate(90deg)"
      break
    case "4": img.style.webkitTransform = "rotate(135deg)"
      break
    case "5": img.style.webkitTransform = "rotate(180deg)"
      break
    default: alert (false)
  } 
}

Все заработало!

izbash · #6 (**permalink**) 11.10.2013, 09:18

Может кому то пригодится http://codepen.io/izbash/pen/exHdg

Форум

Справочник

Discord чат

Курсы javascript