Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a ARTDM 170 Week 4: JavaScript Effects
Semelhante a ARTDM 170 Week 4: JavaScript Effects (20)
Mais de Gilbert Guerrero
Mais de Gilbert Guerrero (20)
Último
Último (20)
ARTDM 170 Week 4: JavaScript Effects
- 1. ARTDM 170, Week 4: JavaScript Effects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
- 3. Put your files in my dropbox • Put them in a folder with your lastname and first initial example: smith-h index.html page1.html page2.html page3.html
- 4. JavaScript Rollover Review Plus a new example: Rollover Slideshow
- 6. Prototype and Scriptaculous Download: http://prototypejs.org http://script.aculo.us
- 8. Create a New Web Page
- 9. Add the script to your pages • Put this between the <head> tags <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
- 10. Basics $('#box').hide(); $('#box').show(); $('#box').toggle(); Example: <div id="box"><img src="pic1.jpg" /></div> <a href="#" onClick="$('#box').hide(); return false;">Hide</a>
- 11. Effects $('#box').fadeOut(1000); $('#box').fadeIn(1000); $('#box img').animate({width:'90%'}, 1000);
- 12. Functions function slide() { $imgs.eq( pos++ ).fadeIn(1000, function() { if( pos == $imgs.length ){ pos = 0; $imgs.css("display","none"); } slide(); }); }
- 13. Homework due Sept 16 • Create a slideshow with jQuery • Use at least 5 images • Make the images slide in, grow, fade in, drop in from the top, or animate in some way onto the page when a user clicks a thumbnail Get ready for Adobe Flash next week