Cet article décrit le plugin de police de défilement horizontal JS personnalisé. Partagez-le pour votre référence, comme suit:
<script type = "text / javascript"> $ (function () {var setting = {contenu: "@@@@@@ text flottant ####", Overfep: true, width: "100px", TargetID: "Huangbiao", // La fonction de rappel après l'affichage est sur "20px" alerte (DDDD "); / * Principle Description: 1. Le Top Parent Div est la barre de défilement cachée 2. La longueur de la barre de défilement div supérieure est supérieure ou égale à la distance de la barre de défilement de la div supérieure, que la distance de la barre de défilement du div supérieur soit 0 * / fonction Fontmove (useettingObj) {var that = this; // Utilisez l'horodatage comme TimeStamp de valeur ID VAR = new Date (). GetTime (); this.setting = {// Scrolling Text Content Content: "Floating Text", // La largeur de la barre de défilement est affiché la largeur: "200px", // vitesse tous les 30 millisecondes: 30, //, si la suspension de la souris s'arrête, true est vrai, False est non-stop, default est vrai stocké, s'il est "", alors la valeur par défaut est placée à la fin de la balise corporelle TargetID: "", onaftershow: function () {}}; // obtient le fichier de configuration de l'utilisateur this.setting = $ .Extend (this.setting, usesettingobj); // vérifie les paramètres du fichier de configuration this.checkParam = function () {} // extension plugin this.callback = function (myfun) {if (typeof myfun == "function") {// Cela représente le rappel, vous devez donc utiliser parent myfun.call (that); }} this.remove = function () {$ ("#" + that.setting.objid) .remove (); } this.init = function () {// Toutes les méthodes pour obtenir le fichier de configuration sont à utiliser ce.setting var Domstr = '<div id = "' + that.setting.objid + '" style = "overflow: HIDDEN; width:' + that.setting.width + '">' + '<div>' + '<div>' + '<divid = "' + that.setting.objid + '. style="float:left;">'+that.setting.content+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>' + '</div>'; // jugez si l'emplacement du contenu est spécifié si ("" == that.setting.targetId) {$ ("body"). APPEND (DOMSTR); } else {$ ("#" + that.setting.targetId) .html (DOMSTR); } // Conteneur de contenu div var thatDiv = document.getElementById (that.setting.objid); // le premier enfant div sur la gauche var Sondiv1 = document.getElementById (that.setting.objid + '_div1'); // Le deuxième enfant div sur la gauche var Sondiv2 = document.getElementById (that.setting.objid + '_div2'); this.Marquee = function () {// Utilisez le temporisateur pour modifier la valeur // console.log ("ThatDiv.Scrollleft:" + ThatDiv.scrollleft); // //sondiv1.offsetwidth La valeur est fixe // console.log ("Sondiv1.offsetWidth:" + Sondiv1.offsetwidth); Scrollbars // Console.log ("Sondiv1.scrollleft:" + Sondiv1.scrollleft); // //sondiv2.offsetWidth La valeur est fixe // console.log ("Sondiv2.offsetwidth:" + Sondiv2.offsetwidth); // // La valeur est toujours 0 parce qu'elle n'a pas de scrollbar // // console.log ("Sondiv2.Scrollleft:" + Sondiv2.Scrollleft); // La distance de la barre de défilement div supérieure est supérieure à la distance horizontale du premier enfant div, c'est-à-dire si elle est supérieure à la distance réelle du contenu si (ThatDiv.Scrollleft - Sondiv1.offsetWidth> = 0) {// La longueur de la barre de défilement est à nouveau dégagée par 0, ce qui est équivalent à la première div. ThatDiv.Scrollleft - Sondiv1.OffsetWidth; } else {thatDiv.scrollleft ++; }} var myvar = setInterval (that.marquee, that.setting.speed); // la souris est suspendue, s'il faut arrêter le mouvement if (that.setting.overstop) {thatDiv.onMouseOver = function () {ClearInterval (myvar);} thatDiv.onMouseout = function () {myvar = setInterval (marquee, 30);}} if (typeof that.setting.onafterShow == "function") {function that.setting.onaftershow.call (that, that); }} // Finizer l'initialisation this.init (); // Renvoie la méthode elle-même, de sorte que tous les paramètres qui configurent ceci peuvent être obtenus le renvoient; } </ script>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.