Objectifs
- Utiliser Jquery pour pour créer une fonctionnalité coulissante
Exercice 01
Énoncé
- Vous pouvez visualiser l'énoncé de l'application
Solution
Code JS
$(function(){ //set some vars var prox = $("#proximity"), scroller = $("<div></div>", { id: "scroller" }), //advice messages pointerText = "Utilisez votre pointeur pour faire défiler, se déplaçant vers le bord défile plus rapidement!", keyboardMessage = "Utilisez vos touches fléchées pour faire défiler les images!", message = $("<p></p>", { id: "message", text: keyboardMessage }); //add class and append scroller prox.addClass("slider").wrapInner(scroller).append(message); var middle = prox.width() / 2; //re-cache scroller scroller = $("#scroller"); //set width of scroller based on width/margin of items scroller.width(function() { var total = 0; scroller.children().each(function(i, val) { var el = $(this); total = total + (el.outerWidth() + parseInt(el.css("marginLeft"))); }); return total; //center scroller }).css("left", "-" + (scroller.width() / 2 - middle) + "px"); //function to set anim duration and init anim function goAnim(e) { //reset pointer postion to be relative to proximity container var offset = prox.offset(), resetOffset = e.pageX - offset.left - middle, //speed based on distance from center (further == slower) normalizedDuration = (resetOffset > 0) ? resetOffset : -resetOffset, duration = (middle - normalizedDuration) * 50; //start animating scroller scroller.stop().animate({ left: (resetOffset < 0) ? 0 : "-" + (parseInt(scroller.width()) - parseInt(prox.width())) }, duration, "linear"); } //track mouse pointer prox.mouseenter(function(e) { //show pointer message message.text(pointerText).delay(1000).fadeOut("slow"); goAnim(e); //record pointer movements inside proximity element prox.mousemove(function(ev) { goAnim(ev); }); }); //stop animating prox.mouseleave(function() { scroller.stop(); prox.unbind("mousemove"); }); //provide keyboard navigability $(document).keydown(function(e) { //only react to arrow keys if (e.keyCode === 37 || e.keyCode === 39) { //hide message message.fadeOut("slow"); //scroll on left or right arrow keys if (!scroller.is(":animated")) { scroller.stop().animate({ left: (e.keyCode === 37) ? 0 : -(scroller.width() - prox.width()) }, 6000, "linear"); } } }).keyup(function() { scroller.stop(); }); });
Exercice 02
Énoncé
- Vous pouvez visualiser l'énoncé de l'application
Solution
-
Code HTML
<!doctype html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type = "text/javascript" src = "TP1-Animation-Ex02.js"></script> <link type="text/css" rel="stylesheet" href="TP1-Animation-Ex02.css"> </head> <body> <button id="button">Démarrer l'animation</button> <div></div> </body> </html> -
Code CSS
div { width:50px; height:50px; position:absolute; left: 10px; top: 50px; background:rgb(128, 168, 243); } -
Code JS
$(function() { var drap = 0; var div=$('div'); $('#button').click(function(){ drap=0; animation(); }); function animation(){ if(drap==0){ div.animate({height:'150px'},"slow"); div.animate({width:'150px'},"slow"); div.animate({height:'100px'},"slow"); div.animate({width:'100px'},"slow",animation); } } $("div").hover(function(){drap=1;},function(){drap=0;animation();}); });
-