Correction TP1 Animation JQuery

Correction TP1 Animation JQuery

  1. Objectifs

    • Utiliser Jquery pour pour créer une fonctionnalité coulissante
  2. Exercice 01

      1. Énoncé
      2. 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();
          	});
          });



  3. Exercice 02

    1. Énoncé
    2. Solution
      1. 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>
      2. Code CSS
        • div {    
              width:50px;
              height:50px;
              position:absolute;
              left: 10px;
              top: 50px;
              background:rgb(128, 168, 243);
          }
      3. 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();});
          });



Abonnez vous à notre chaîne YouTube gratuitement