Retour à Forum de site web

glissant un div

  • seularts
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Jan 02, 2007
  • Messages: 147
  • Loc: Romania
  • Status: Offline

Message Juin 22nd, 2008, 3:30 am

salut .. i saw tis à effet http://mediasauce.com/ et il a essayé de refaire depuis, mais sans succès. J'ai essayé de jQuery, il est encore très irrégulière sur son tutoriels. Quelqu'un peut-il me donner un code sur la façon de faire un div glisser et rebondir à quelques reprises et une référence à l'endroit où obtenir de l'jscripts également des effets de cette grâce?)
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 22nd, 2008, 3:30 am

  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 22nd, 2008, 4:40 am

Tout ce que je pouvais trouver a ce tutoriel sur la façon de faire un simple curseur: http://www.harrymaugans.com/2007/03/06/ ... t-and-css/

En fait, le code est assez lourde, car elle permet de multiples curseurs sur la même page - vous pouvez couper le code un peu si vous n'avez pas besoin de cela.

Malheureusement, je n'ai pas pu trouver un script qui fait le rebond effet, vous pourriez probablement vous-même code -, lorsque l'effet glissade se termine, si vous commencez à off dans le sens inverse avec une plus petite distance, jusqu'à ce qu'il atteigne un seuil minimum. Faites-moi savoir si vous avez besoin d'aide concernant ce sujet.
No Strings Attached: A JavaScript graphics demo.
  • seularts
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Jan 02, 2007
  • Messages: 147
  • Loc: Romania
  • Status: Offline

Message Juin 22nd, 2008, 5:06 am

hmm en effet il est lourd .. Permettez-moi de montrer ce que je eneded en place avec:
Code: [ Select ]
<head>
<style type="text/css">
div#comm{
position:relative;
float: left;
width:795px;
padding-left:25px;
}

div#comm span#x{
margin-left:5px;
padding-left:3px;
padding-right:3px;
cursor:pointer;
background: url() #a4bda4;
border:1px solid #636363;
}

span#x:hover{
color: #faf4f4
}

div#space{
display: none;
}

div#space p{
margin-top:0;
margin-bottom:0;
width:775px;
background: url() #f2fff0;
border:1px solid #636363;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    
    $("#x").click(function () {
     if ($("#space").is(":hidden")) {
        $("#space").slideDown("slow");
     } else {
        $("#space").hide("slow");
     }
    });

});

</script>
</head><body>
<div id="comm">
<span id="x">Click me!</span>
<div id="space">
<p>
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
</p>
</div>
</div>
</body>
  1. <head>
  2. <style type="text/css">
  3. div#comm{
  4. position:relative;
  5. float: left;
  6. width:795px;
  7. padding-left:25px;
  8. }
  10. div#comm span#x{
  11. margin-left:5px;
  12. padding-left:3px;
  13. padding-right:3px;
  14. cursor:pointer;
  15. background: url() #a4bda4;
  16. border:1px solid #636363;
  17. }
  19. span#x:hover{
  20. color: #faf4f4
  21. }
  23. div#space{
  24. display: none;
  25. }
  27. div#space p{
  28. margin-top:0;
  29. margin-bottom:0;
  30. width:775px;
  31. background: url() #f2fff0;
  32. border:1px solid #636363;
  33. }
  34. </style>
  35. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  36. <script type="text/javascript">
  38. $(document).ready(function(){
  39.     
  40.     $("#x").click(function () {
  41.      if ($("#space").is(":hidden")) {
  42.         $("#space").slideDown("slow");
  43.      } else {
  44.         $("#space").hide("slow");
  45.      }
  46.     });
  48. });
  50. </script>
  51. </head><body>
  52. <div id="comm">
  53. <span id="x">Click me!</span>
  54. <div id="space">
  55. <p>
  56. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  57. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  58. This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations!
  59. </p>
  60. </div>
  61. </div>
  62. </body>

Je pense que son code en moins ici, mais je, coincé sur le rebond dans jQuery. Il est le plug assouplissement jquery mais je n'ai pas IDEEA comment faire ce travail!??: P Toute solution de rechange à ce code pour le faire rebondir à la fin!?
  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 22nd, 2008, 5:25 am

Pas familier avec jQuery Im, mais je ne pense pas que la méthode intégrée slideDown peuvent aider à la faire rebondir, car il effectue une lame complète. Pour cela, vous aurez besoin d'une fonction qui peut effectuer une diapositive partiel (jusqu'à une hauteur donnée) à une disposition de rappel. (une fonction qui sera appelée lorsque les finitions glissement) Supposons que vous ayez deux fonctions telles nommé "mySlideUp" et "mySlideDown";, vous voudriez l'utiliser comme suit:
Code: [ Select ]
var goingDown = true;
var bounceHeight = 50;
var maxHeight = 200;
mySlideDown(maxHeight, 'bounce()');

function bounce() {
bounceHeight -= 10;

if (goingDown)
    mySlideUp(maxHeight - bounceHeight, 'bounce()');
else
    mySlideDown(maxHeight - bounceHeight, 'bounce()');

goingDown = !goingDown;
}
  1. var goingDown = true;
  2. var bounceHeight = 50;
  3. var maxHeight = 200;
  4. mySlideDown(maxHeight, 'bounce()');
  6. function bounce() {
  7. bounceHeight -= 10;
  9. if (goingDown)
  10.     mySlideUp(maxHeight - bounceHeight, 'bounce()');
  11. else
  12.     mySlideDown(maxHeight - bounceHeight, 'bounce()');
  14. goingDown = !goingDown;
  15. }
No Strings Attached: A JavaScript graphics demo.
  • seularts
  • Graduate
  • Graduate
  • Avatar de l’utilisateur
  • Inscription: Jan 02, 2007
  • Messages: 147
  • Loc: Romania
  • Status: Offline

Message Juin 22nd, 2008, 7:59 am

pouvez-vous me donner le code complet avec les div et le bouton d'action please:) Je n'arrive pas à faire face ..
  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 23rd, 2008, 1:51 am

Je n'ai pas testé le code que j'ai posté, c'est juste une ligne directrice. Peut-être que lorsque j'ai plus de temps, mauvais essayer d'obtenir un modèle de travail.
No Strings Attached: A JavaScript graphics demo.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 112 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC