Lista de atividades

<script>

$(document).ready(function(){

var id = $("li:first").data("id");

var classe = $("li:first").data("classe");

alert("Informações: ID="+id+"; classe="+classe);

});

</script>

</head>

<body>

<ul class="nomes">

<li data-id="1100" data-classe="CFT">Adriana</li> <li data-id="1200" data-classe="CFT">Alice</li> <li data-id="1300" data-classe="ECN">Fabiana</li> <li data-id="1400" data-classe="PRI">Fabiano</li>

</ul>

</body>

</html>

Com a função data() foram acessados os atributos " data-id " e " data-classe " do primeiro elemento <li>.

Lista de atividades

1. Faça uma página com 2 imagens. Quando o usuário clicar no

ícone trocar, deverá alterar a imagem principal para outra. Se ocorrer um novo clique, deve voltar a imagem original. Faça com que a cada novo clique as imagens sejam trocadas, assim sucessivamente. Dica: use attr para alterar a imagem, e click no ícone para efetuar a troca da imagem. Use também fadeIn() para criar o efeito de transição entre uma imagem e outra.

2. Faça uma página com 4 imagens. Quando o usuário clicar nas

setas laterais, a imagem central deve ser alterada pela próxima imagem. Dica: use attr para alterar a imagem central, e click nas setas para avançar ou retornar. Use também fadeIn() para criar o efeito de transição entre uma imagem e outra.

3. Faça uma página que ao clicar na imagem em miniatura, a

mesma é expandida para o quadro principal. Observe que quando o clique é feito na miniatura, a mesma fica "ativada" enquanto as outras miniaturas ficam desativadas. Dica: use fadeTo() para acertar o nível de opacidade desejado.

4. Faça a página abaixo. Quando o usuário clicar no botão

avançar ou retornar, a caixa cinza deve ser preenchida com um texto informativo sobre a imagem.

5. Utilize o evento mouseover para quando o mouse passar em

cima da imagem de miniatura, a imagem grande seja alterada.

OceanofPDF.com