jQuery opdrachten

Pagina's in- en uitfaden

De HTML code voor deze opdracht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Pagina's in- en uitfaden</title>
</head>
<body>
  <p>Klik <a href="#">hier</a> om deze pagina nogmaals te laden.</p>
</body>
</html>

Zorg dat je op deze pagina jQuery kunt gebruiken.

Schrijf een functie om bij het klikken op de a tag de pagina (body tag) te vervagen en dezelfde pagina opnieuw te laden:

De te laden pagina geef je als argument mee aan de onclick functie.
Het uitfaden zelf duurt 1,5 seconden.
Na het uitfaden kun je met de volgende opdracht een in de variabele url opgeslagen pagina laden:

window.location.href = url;

Schrijf de jQuery code om na het laden van de webpagina de pagina te verbergen. Daarna zorg je dat de pagina in 1,5 seconde opkomt.

Weergeven

Banner

De HTML code voor deze opdracht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Banner</title>
  <style type="text/css">
    .banner {
      position: absolute;
      top: 0px;
    }
  </style>
</head>
<body>
  <img class="banner" src="banners/banner1.png" width="905" height="324" />
  <img class="banner" src="banners/banner2.png" width="905" height="324" />
</body>
</html>

Zorg dat je op deze pagina jQuery kunt gebruiken.

Na de laden van de webpagina wordt de laatste tag met de klasse .banner verborgen.

Schrijf een functie waarmee je in 2 seconden de zichtbare foto geleidelijk laat verdwijnen en de niet zichtbare foto geleidelijk laat opkomen.

Deze functie wordt na het laden van de pagina uitgevoerd en telkens na het voltooien van het geleidelijk verdwijnen (opkomen) van de foto. Zo maak je een continue overvloei-overgang van de ene naar de andere foto.

Om de overgangsduur op een eenvoudige centrale manier te kunnen aanpassen, plaats je vooraan het script een variabele waarin de overgangsduur wordt opgeslagen. Gebruik deze variabele op de desbetreffende plaatsen in het script.

Breidt het script uit zodat de niet zichtbare afbeelding door de volgende banner wordt vervangen. Tip: gebruik de attr() methode om de src eigenschap van de afbeelding aan te passen.

Zorg dat na het weergeven van de laatste afbeelding (banner28.png), terug de eerste afbeelding wordt geladen.

Breidt het script uit zodat na de overvloei-overgang de zichtbare foto 4 seconden blijft staan, voor de volgende overvloei-overgang start.

Gebruik voor de wachttijd tussen de overvloei-overgangen een globaal aan te passen variabele.

Weergeven