Geek Answers Handbook

Fire CSS3 Convert From Javascript Button

I am new to CSS3 transitions. I am trying to make image slideshows for webkit only. There are 3 images aligned side by side inside a wide div. This wide DIV is inside a DIV container whose overflow property is set to hidden. the width of the DIV container is equal to each image, so the user can only see one image at a time.

here for this HTML and 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;                      
     }

Now I have added a CSS hover selector to the code to check the transition. when the user hovers over the image (internal DIV, to be precise), the whole set moves to the left by 320 pixels (this is the width of each image).

CSS for hovering

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

, , , DIV.

, Javascript. btnNext. ? , .

Javascript

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

, - ! Javascript? :)

+5
2

webkit

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

- : style.-webkit-transform

+2

JavaScript -webkit-transform :

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

-, :

transform
webkitTransform
MozTransform
OTransform
msTransform
+1

More articles:


All Articles