Correction TP1 Animation JQuery
Correction TP1 Animation JQuery
-
Objectifs
- Utiliser Jquery pour pour créer une fonctionnalité coulissante
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code JS
-
Exercice 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code HTML
-
Code CSS
-
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();
});
});<!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>div {
width:50px;
height:50px;
position:absolute;
left: 10px;
top: 50px;
background:rgb(128, 168, 243);
}$(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();});
});
