ARTDM 170 Week 4: JavaScript Effects

683 views
629 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ARTDM 170 Week 4: JavaScript Effects

    1. 1. ARTDM 170, Week 4: JavaScript Effects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
    2. 2. Turn in Homework  
    3. 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. 4. JavaScript Rollover Review Plus a new example: Rollover Slideshow
    5. 5. JavaScript Effects
    6. 6. Prototype and Scriptaculous Download: http://prototypejs.org http://script.aculo.us
    7. 7. jQuery Download: http://jquery.com
    8. 8. Create a New Web Page
    9. 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. 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. 11. Effects $('#box').fadeOut(1000); $('#box').fadeIn(1000); $('#box img').animate({width:'90%'}, 1000);
    12. 12. Functions function slide() { $imgs.eq( pos++ ).fadeIn(1000, function() { if( pos == $imgs.length ){ pos = 0; $imgs.css("display","none"); } slide(); }); }
    13. 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

    ×