En utilisant jquery, comment puis-je faire glisser un div dans la page similaire à powerpoint?

Question

Dans MS PowerPoint, vous pouvez faire glisser le contenu au milieu de la page depuis l'extérieur de l'écran et depuis n'importe quelle direction. Je souhaite le faire avec Jquery. Fondamentalement, je veux faire glisser une image d'un rideau d'une certaine direction, puis faites glisser une photo d'un gars et enfin glisser une citation sur le dessus de tout cela. Est-ce que quelqu'un a la moindre idée de comment faire cela en utilisant Jquery?

Answer 1

1) Ajouter une image à la page. Vous pouvez le faire soit avec javascript ou CSS. il doit être position: absolu non placé à l'extérieur de la fenêtre (à gauche: -WIDTHpx). Ou faites-le simplement caché avec display: none; 2) Utilisez jQuery .animate() ou .slideToogle() pour faire glisser cette image à l'intérieur.

Answer 2

utilisent ce CSS:

#id_like_powerpoint{ 
position:absolute;top:-100;left:350px; 
} 

Si vous voulez onload faites ceci:

$(document).ready(function(){ 
$('#id_like_powerpoint').animate({'top' : '100px'},1500); 
}); 

Si vous voulez utiliser onclick:

$('#id_to_be_clicked').click(function(){ 
    $('#id_like_powerpoint').animate({'top' : '100px'},1500); 
    }); 

Vous pouvez mettre des chiffres, c'était juste et exemple

Best, Shawn