This article describes the JS custom horizontal scrolling font plugin. Share it for your reference, as follows:
<script type="text/javascript"> $(function(){ var setting = { content : " @@@@@@floating text#### ", overStop : true, width:"100px", targetId:"huangbiao", //The callback function after display is onAfterShow : function(obj){ obj.setting.width = "20px";// alert("dddd"); //Reset after modifying the configuration file // obj.init(); //Delete dynamically added content // obj.remove(); } }; var ooo = new fontMove(setting); //Reset//ooo.setting.width = "20px;"// ooo.init(); }); /* Principle description: 1. The top parent div is the hidden scroll bar 2. The width of the second level DIV (the child div of the top parent div) is 8000% 3. There are two third-level child divs, div1 (the most left) and div2 (the second left) and the node content is exactly the same, both floating to left 4. Set a timer, and the scroll bar of the top div scroll bar scroll to the left 1px 5. Once the length of the top div scroll bar is greater than or equal to the distance of the scroll bar of the top div, let the distance of the scroll bar of the top div be 0 */ function fontMove(userSettingObj){ var that = this; //Use the timestamp as the id value var timestamp = new Date().getTime(); this.setting = { //Scrolling text content content: "Floating text", //The width of the scroll bar is displayed width: "200px", //Speed every 30 milliseconds: 30, //Whether the mouse suspension stops, true is true, false is non-stop, default is true overStop: true, //The ID value of the scroll bar is objId: timestamp, //The target position of the space is stored, if it is "", then the default is placed at the end of the body tag targetId : "", onAfterShow:function(){ } }; //Get the user's configuration file this.setting = $.extend(this.setting,userSettingObj); //Check the parameters of the configuration file this.checkParam = function(){ } //Extension plugin this.callback = function(myfun){ if(typeof myfun == "function"){ //This stands for callback, so you need to use parent myfun.call(that); } } this.remove = function(){ $("#"+that.setting.objId).remove(); } this.init = function(){ //All methods to get the configuration file are to use that.setting var domStr = '<div id="' + that.setting.objId + '" style="overflow:hidden;width:'+that.setting.width+'">'+ '<div>'+ '<div>'+ '<div id="' + that.setting.objId + '_div1" style="float:left;">'+that.setting.content+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'; //Judge whether the location of content is specified if(""==that.setting.targetId){ $("body").append(domStr); }else{ $("#"+that.setting.targetId).html(domStr); } //Content container div var thatDiv = document.getElementById(that.setting.objId); //The first child div on the left var sonDiv1 = document.getElementById(that.setting.objId + '_div1'); //The second child div on the left var sonDiv2 = document.getElementById(that.setting.objId + '_div2'); this.Marquee = function(){ //Use timer to change the value // console.log("thatDiv.scrollLeft : " + thatDiv.scrollLeft);// //sonDiv1.offsetWidth The value is fixed // console.log("sonDiv1.offsetWidth : " + sonDiv1.offsetWidth);// // The value is always 0 because it has no scrollbars // console.log("sonDiv1.scrollLeft : " + sonDiv1.scrollLeft);// //sonDiv2.offsetWidth value is fixed// console.log("sonDiv2.offsetWidth : " + sonDiv2.offsetWidth);// // The value is always 0 because it has no scrollbar // console.log("sonDiv2.scrollLeft : " + sonDiv2.scrollLeft); // Whether the distance of the top div scrollbar is greater than the horizontal distance of the first child div, that is, whether it is greater than the actual distance of the content if(thatDiv.scrollLeft - sonDiv1.offsetWidth >= 0){ //The length of the scroll bar is cleared again by 0, which is equivalent to displaying from the first div again, and then scroll to the left thatDiv.scrollLeft = thatDiv.scrollLeft - sonDiv1.offsetWidth; } else{ thatDiv.scrollLeft++; } } var myvar=setInterval(that.Marquee,that.setting.speed); //The mouse is suspended, whether to stop motion if(that.setting.overStop){ thatDiv.onmouseover=function(){clearInterval(myvar);} thatDiv.onmouseout=function (){myvar=setInterval(Marquee,30);} } if(typeof that.setting.onAfterShow == "function"){ that.setting.onAfterShow.call(that,that); } } //Finish initialization this.init(); //Return the method itself, so that all parameters that configure this can be obtained return this; }</script>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.