Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2013, 08:05
Интересующийся
Отправить личное сообщение для izbash Посмотреть профиль Найти все сообщения от izbash
 
Регистрация: 28.06.2013
Сообщений: 19

Проблемы с с css3 свойством webkitTransform
Здравствуйте!

Пишу скрипт, который будет изменять угол положения изображения и обрезать ее. Возникла проблема на стадии "вращения" (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;} 
      
}

Последний раз редактировалось izbash, 11.10.2013 в 08:31.
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2013, 08:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

izbash, ты внимательно почитай как работает switch...
А особенно это место
Цитата:
При этом равенство подразумевается в смысле оператора "===", сравнивать с регулярным выражением или как-то еще switch не умеет.
http://javascript.ru/switch
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2013, 08:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

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

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

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

transform = "rotate(45deg)";
...
img.style.webkitTransform=transform;
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2013, 08:50
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Так же внимательно присмотритесь на той же странице к "Пример: switch без break"
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2013, 09:17
Интересующийся
Отправить личное сообщение для izbash Посмотреть профиль Найти все сообщения от izbash
 
Регистрация: 28.06.2013
Сообщений: 19

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

Поменял 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)
  } 
}


Все заработало!
Ответить с цитированием
  #6 (permalink)  
Старый 11.10.2013, 09:18
Интересующийся
Отправить личное сообщение для izbash Посмотреть профиль Найти все сообщения от izbash
 
Регистрация: 28.06.2013
Сообщений: 19

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализовать свойства css3 при помощи jQery/javascript в браузерах без поддержки css3 Begoian Internet Explorer 4 30.09.2013 17:30
проблемы с PagingToolbar serg3091 ExtJS 4 26.06.2013 09:33
CSS3 3 примера flash и сss3 mycoding Оффтопик 4 25.07.2010 15:15
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47