"
Team:UFMG Brazil/css3test
From 2013.igem.org
(Difference between revisions)
(Created page with "{{Team:UFMG Brazil/barra}} {{carlos_teste}} {{Team:UFMG Brazil/sponsor}}") |
|||
| Line 1: | Line 1: | ||
{{Team:UFMG Brazil/barra}} {{carlos_teste}} | {{Team:UFMG Brazil/barra}} {{carlos_teste}} | ||
| + | <html> | ||
| + | <style> | ||
| + | |||
| + | p#cf7_controls { | ||
| + | text-align:center; | ||
| + | } | ||
| + | |||
| + | #cf7_controls span { | ||
| + | padding-right:2em; | ||
| + | cursor:pointer; | ||
| + | } | ||
| + | |||
| + | #cf7 { | ||
| + | position:relative; | ||
| + | height:281px; | ||
| + | width:450px; | ||
| + | margin:0 auto 10px; | ||
| + | } | ||
| + | |||
| + | #cf7 img { | ||
| + | position:absolute; | ||
| + | left:0; | ||
| + | -webkit-transition: opacity 1s ease-in-out; | ||
| + | -moz-transition: opacity 1s ease-in-out; | ||
| + | -o-transition: opacity 1s ease-in-out; | ||
| + | transition: opacity 1s ease-in-out; | ||
| + | opacity:0; | ||
| + | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
| + | filter: alpha(opacity=0); | ||
| + | } | ||
| + | |||
| + | #cf7 img.opaque { | ||
| + | opacity:1; | ||
| + | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
| + | filter: alpha(opacity=1); | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | |||
| + | <script type=text/javascript> | ||
| + | $(document).ready(function() { | ||
| + | $("#cf7_controls").on('click', 'span', function() { | ||
| + | $("#cf7 img").removeClass("opaque"); | ||
| + | |||
| + | var newImage = $(this).index(); | ||
| + | |||
| + | $("#cf7 img").eq(newImage).addClass("opaque"); | ||
| + | |||
| + | $("#cf7_controls span").removeClass("selected"); | ||
| + | $(this).addClass("selected"); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <div id="cf7" class="shadow"> | ||
| + | <img class='opaque' src="/images/Windows%20Logo.jpg" /> | ||
| + | <img src="/images/Turtle.jpg;" /> | ||
| + | <img src="/images/Rainbow%20Worm.jpg;" /> | ||
| + | <img src="/images/Birdman.jpg;" /> | ||
| + | </div> | ||
| + | <p id="cf7_controls"> | ||
| + | <span class="selected">Image 1</span> | ||
| + | <span>Image 2</span> | ||
| + | <span>Image 3</span> | ||
| + | <span>Image 4</span> | ||
| + | </p> | ||
| + | |||
| + | </html> | ||
| + | |||
{{Team:UFMG Brazil/sponsor}} | {{Team:UFMG Brazil/sponsor}} | ||
Revision as of 21:21, 27 September 2013
