>>Nous avons tout simplement besoin d'une div qui contiendra le texte dans une balise p.
Le plugin qui sera créé est minimaliste, mais c'est à vous qu'il appartiendra de le faire évoluer.
>> Vous allez donc placer sur votre page entre les balises <body> et </body> une div contenant une balise p qui servira de conteneur à notre texte.
<div id="news">
<p>Le plus simple des plugins pour un défilement de texte JQuery</p>
</div>
>> Vous allez maintenant mettre en forme votre code HTML pour qu'il puisse apparaitre correctement
comme sur notre page
Veillez à inclure ce code entre des balises <style> et </style> ou en les insérant dans un fichier externe .css
>> S'agissant d'un plugin de base, il vous faudra surement modifier certains paramètres suivant la longueur de votre texte.
Mais vous faire travailler un peu, c'est le but...Non ?
#news {
overflow:hidden; /* Important ! Permet au texte de se masquer automatiquement s'il dépasse
les limites du conteneur. */
position:absolute;
left:15%;
top:30%;
width:700px;
border:1px solid #fff;
margin-left:10px;
}
#news p {
width:700px;
font-size: 14px;
font-weight:bold;
color:#ffff00;
}
Plugin
>>Vous allez maintenant écrire votre plugin dans l'éditeur de votre choix en le sauvegardant comme suit: "addictjqueryplus.js"
>>Vous veillerez ensuite à le lier à votre page entre les balises <head> et </head> de cette façon :
>><script> type="text/javascript" src="addictjqueryplus.js"></script>
(function($) {
$.fn.news = function() {
return this.each(function(){
var $this = jQuery(this);
//Récupération de la marge gauche du texte par rapport à son conteneur
var pos = parseInt($this.css('marginLeft'));
//Récupération de la longueur de la balise p
var lng = parseInt($this.css('width'));
function defil(){
//Si notre texte n'a pas entièrement défilé
if (pos >(-1*lng)+5){
//Nous réduisons sa marge d'1 pixel à la fréquence déterminé lors du lancement.
$this.animate({"marginLeft": "-=1px"},10);
}
else{
//sinon nous repositionnons ce texte à droite au delà de la visibilité pour le faire défiler.
$this.css({"display":'none'});
$this.animate({"marginLeft": "+720px"},40);
$this.css({"display":'block'});
}
}
//Lancement de la fonction dans le plugin.
defil();
});
};
})(jQuery);
jQuery
>>Vous allez pouvoir maintenant précharger votre plugin
>>Placez le code ci-dessous entre les balises <head> et </head>.
Nous chargeons donc le plugin en lui assignant une fréquence d'exécution à l'aide de la fonction setInterval.
<script type="text/javascript">
var timeout;
$(function() {
timeout=setInterval("$('#news p').news();",25)
});
</script>
Revenez très vite !!!
Merci par avance de nous transmettre toutes vos questions, commentaires, suggestions via l'onglet "Contact" de la page d'accueil du site.
