Fire CSS3 Transform из нажатия кнопки JavaScript - PullRequest
Новая
       16

Fire CSS3 Transform из нажатия кнопки JavaScript

5 голосов
/ 16 ноября 2011

Я новичок в переходах CSS3. Я пытаюсь сделать слайд-шоу изображений только для webkit. Есть 3 изображения, выровненные рядом друг с другом в широком DIV. Этот широкий DIV находится внутри контейнера DIV, свойство переполнения которого было установлено как скрытое. ширина контейнера DIV равна каждому изображению, поэтому пользователь может видеть только одно изображение за раз.

вот HTML и CSS для этого.

HTML 

    <div id = "imageHolder">
        <div id="slide1_images">
            <img src="./images/fish.jpg" />
            <img src="./images/desert.jpg" />
            <img src="./images/space.jpg" />                    
        </div>          
    </div>

CSS 

    #imageHolder
     {                     
       width: 320px;
       height: 240px;                       
       border: 1px solid grey;
       overflow: hidden;
       position: relative;                      
     }

    #slide1_images
     {                     
       position:absolute;
       left:0px;
       width:960px;
       -webkit-transition: -webkit-transform 0.5s;                      
     }

Теперь я добавил селектор CSS в коде только для проверки перехода. когда пользователь наводит курсор на изображение (внутренний DIV, если быть точным), весь набор перемещается влево на 320 пикселей (это ширина каждого изображения).

CSS для наведения 

    #slide1_images:hover
     {
       -webkit-transform:translate(-320px,0);
     }

До этого код работал отлично, когда я наводил указатель мыши на первое изображение, набор перемещался влево, а 2-е изображение идеально вписывалось во внешний DIV.

То, что я хочу, это выполнить то же действие при нажатии кнопки Javascript. Я добавил кнопку с именем btnNext на своей странице. Как я могу запустить перевод из события нажатия кнопки? Я попробовал ниже, но это не работает.

Javascript 

    <script type = "text/javascript">
       function btnNext_clicked()
        {                   
          document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
        }
    </script>

Я уверен, что сделал что-то глупое! не могли бы вы помочь мне исправить функцию Javascript? Заранее большое спасибо:)

Ответы [ 2 ]

2 голосов
/ 16 ноября 2011

С очевидным предостережением для браузеров webkit вам нужно всего лишь использовать 

.style["-webkit-transform"] = ..

как - не может использоваться здесь в качестве встроенного имени свойства: style.-webkit-transform

1 голос
/ 22 ноября 2012

Из JavaScript вы можете получить доступ к свойству -webkit-transform следующим образом: 

var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';

Вы можете сделать его кросс-браузер дружественным, открыв следующие свойства: 

transform
webkitTransform
MozTransform
OTransform
msTransform
...