L'exemple de cet article décrit l'implémentation par jQuery d'effets de mouvement horizontal avec mise en mémoire tampon horizontale. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
JQuery est utilisé ici pour générer un mouvement horizontal tamponné, qui peut être activé en cliquant sur la souris. Après avoir cliqué, vous pouvez voir que le calque Div se déplace horizontalement, à partir duquel de nombreuses autres formes d'effets d'animation peuvent être dérivées.
Cliquez ici pour voir la démonstration en ligne .
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平移动</title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.
Les lecteurs intéressés par plus de contenu lié aux effets spéciaux jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery" et "Résumé des classiques courants effets spéciaux de jQuery"
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Que faire si la visionneuse de photos Windows manque de mémoire
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
