recherche

Maison >interface Web >js tutoriel >jQuery implémente un effet de mouvement horizontal avec mise en mémoire tampon horizontale (avec téléchargement du code source de démonstration)_jquery

jQuery implémente un effet de mouvement horizontal avec mise en mémoire tampon horizontale (avec téléchargement du code source de démonstration)_jquery

WBOY
WBOYoriginal
2016-05-16 15:17:001359parcourir

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js formatage du montant et du numéro de carte bancaire dans la zone de saisie_javascript skillsArticle suivant：js formatage du montant et du numéro de carte bancaire dans la zone de saisie_javascript skills

Articles Liés

Voir plus