ARTDM 170 Week 4: JavaScript Effects

ARTDM 170, Week 4:
JavaScript Effects
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/

Put your ﬁles in my dropbox
• Put them in a folder with your
lastname and ﬁrst initial

example:

smith-h
index.html
page1.html
page2.html
page3.html

JavaScript Rollover
Review
Plus a new example: Rollover
Slideshow

Prototype and
Scriptaculous
Download:
http://prototypejs.org
http://script.aculo.us

jQuery
Download: http://jquery.com

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>

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>

Effects
$('#box').fadeOut(1000);
$('#box').fadeIn(1000);
$('#box img').animate({width:'90%'}, 1000);

Functions
function slide() {
$imgs.eq( pos++ ).fadeIn(1000, function() {
if( pos == $imgs.length ){
pos = 0;
$imgs.css("display","none");
}
slide();
});
}

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

ARTDM 170 Week 4: JavaScript Effects

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (12)

Similaire à ARTDM 170 Week 4: JavaScript Effects

Similaire à ARTDM 170 Week 4: JavaScript Effects (20)

Plus de Gilbert Guerrero

Plus de Gilbert Guerrero (20)

Dernier

Dernier (20)

ARTDM 170 Week 4: JavaScript Effects