Je voudrais mettre en œuvre quelque chose comme Stackoverflow, la barre en haut de la page qui montre un message.
Je suis tombé sur ce joli effet intéressant avec une page Bounce aussi:
http://www.slidedeck.com/features/ (regarde la barre supérieure violette descendre)
Y a-t-il un moyen simple de faire cela? Peut-être avec seulement jQuery ou autre cadre?
7 Réponses :
Vous devrez récupérer le message à afficher, éventuellement via Ajax, mais:
montre comment montrer une barre sur le dessus en jQuery et est un début
C'est affreux, vous venez de réimplémenter la méthode Toogle JQuery. Je vous suggère d'en apprendre davantage d'ici: API.JQUERY.COM/TOGGLE et BTW Yuor Code DEOSN 't faire ce que j'ai demandé
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="hideMe">Congratulations, you just won a punch in the neck!</div>
<div id="container">
<div id="contents">
<button id="showHide">clicker</button>
</div>
</div>HM C'est un bon point de départ, j'ai copié votre code ici: jsfiddle.net/7dhqr Maintenant pourquoi nous n'avons pas t essayer d'ajouter que les effets de rebond de SDITLECK.COM/FEATRES ? +1 en attendant
Pour l'assouplissement rebondi, il vous suffit de mettre en oeuvre l'un des nombreux plugins d'assouplissement, puis c'est aussi simple que $ ('div # hideme »). Animate ({' hauteur ':' 25px '}, {Durée: 500, Aide: "BounceEaseOut"}); (Syntaxe pour correspondre à Plugin) ...
Que diriez-vous de cela? :) Il suffit d'ajouter des graphiques fantaisistes et il devrait être bon d'aller!
Hmm semble assez sympa je vais le tester demain parce que maintenant je suis o. Iphone et il ne semblait pas faire défiler le reste de la page comme l'exemple que j'ai posté
C'est la chose la plus proche que j'ai posée .. même l'effet arrive sur la page
Dois-je inclure cette jquery.ase.1.3.3js aussi? Qu'est-ce que c'est
@ Oui123 Oui Depuis que la vanille JQuery n'a que les effets "Swing" & "Linear", vous devrez inclure cela pour avoir l'effet gonflant que vous souhaitez. (Ou vous pouvez simplement inclure l'un effet spécifique que vous voulez)
C'est un plugin JQ - jQuery utilise le héritage protoypal pour étendre la fonctionnalité. Il prend soin de l'assouplissement des équations de Penner. Il suffit de le lier après JQuery dans votre balisage.
@both: merci! Comment je pourrais la modifier pour déplacer le bas de la page d'entrée (comme Stridedeck.com?)
@ OUI123 Changer simplement les deux instances de Top dans CSS sur BAS .
@HOODI qui déplacerait la barre de messages au bas de la page, il ne glisserait pas dans le contenu
Cela peut facilement être fait sans jQuery même. Utilisez simplement le DOM pour annoncer un élément div au corps et définir sa position supérieure à zéro. Définissez sa largeur comme l'écran.Width et Hauteur à faire dire 50px. Et juste initier une opacité s'estomper / disparaître. Comme l'échantillon suivant. Cet échantillon est pour IE. Lire Ceci pour référence. Appelez InitiFade pour être le processus de fondu et de décomposition.
var OP = 90;
function processFade() {
var t = "";
OP = OP - 3;
if (OP < 0) {
clearTimeout(t);
OP = 90;
return;
}
$("YOUR_DIV_ELEMENT_HERE").style.filter = "alpha(opacity=" + OP + ")";
if (OP == 0) {
$("YOUR_DIV_ELEMENT_HERE").style.display = "none";
clearTimeout(t);
OP = 90;
return;
}
t = setTimeout("processFade();", 100);
}
function initFade() {
processFade();
}
Merci mec, mais j'ai demandé à comment faire pour le rebond aussi :) Regardez la page BOUNCE lorsque la barre indique: .Com / Caractéristiques est-ce trop difficile à faire?
Rebondir trop hein? Il suffit de répéter le processus susmentionné, mais au lieu de style.filter le remplacer par style.top (n'oubliez pas de définir la position sur Absolute) et d'avoir une variable en cours d'exécution (comme op d'en haut) jusqu'à la hauteur de votre choix. Appelez cette nouvelle fonction après avoir clarifié le délai d'attente, mais avant de retourner dans la fonction susmentionnée.So qu'il y a une fondu, suivie immédiatement par un rebond (et ne ralentit pas). Essayez-le et laissez-moi savoir. Sinon, je collerai le code combiné (non-jQuery)
Les mêmes personnes qui font le plugin dont vous aimez faire un plugin pour faire ce que vous aimez à ce sujet: http: / /www.hellobar.com/
désolé mais c'est seulement sur invitation?
Je viens de trouver une solution excellente et simple de blog.grio.com
faire exactement quoi? Si cela fait beaucoup, il a besoin de beaucoup de code!
J'ai eu la même question aussi mais à la fin, je vais avec écrit quelques lignes simples de CSS & jQuery. Je ne veux pas dépendre trop des libres.
@ABIUSX: J'ai posté un lien, si vous cliquez dessus, vous pouvez voir exactement ce qu'il fait exactement
@ngduc: Pouvez-vous le poster?
@ Oui123 c'est bonjour bar. J'ai des invitations à gauche, tu veux une invitation?
Tu me plaisantes? 99 $ pour quelque chose que je pourrais écrire dans peut-être 30 minutes?