"JavaScript" Original eco-compatible IE6 adjustable and controllable scrolling text

Although the HTML itself has a marquee tag, used to set scrolling text, but in the "HTML" more popular tags and attributes (click to open the link) I have said, this tag to IE8 started not support, in IE6 can set up a few things, So this thing is still written in JavaScript as well. This widget is also more common, but the quality of the online code for a lot of insignificant small effects and added a lot of meaningless code. In fact, you just have to be able to roll right and left, to the edge of the screen automatically return on the line, why to some fade in the flashy things, and write a large stack of code. The following describes a self-written use Padding-left to implement scrolling text, because padding-left this thing in most browsers still no problem.

I. BASIC OBJECTIVES

For example, the beginning of the text can be in 15px-400px this area with every 0.05s,5px pixel seamless scrolling, of course, change the following script, you let me from the earth to the outer space is no problem, as long as you tell me the earth px and outer space PX on the line, and then set two buttons, you click "Stop" It stops, stop and then click "Start" to let it start, it in the "Start" state you point n "Start" is not out of the bug, continue to maintain this state, it in the "Stop" state, you point n "Stop" is also no problem.

Second, HTML layout

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Thought is like, a picture wins thousand words, does not say. Compare your code with the diagram yourself.


Third, the script part
This is the core of the entire control.
<script>//set its scrolling speed is 5px/0.05s, so it can achieve seamless scrolling, not one card. var speed=5;var marqueetimer=setinterval ("Marquee_move ()", 50);//This variable is mainly used to control the scrolling start and stop two Var ismarqueemove=true;/ /scrolling core function Marquee_move () {//This length of code is mainly to convert the padding-left with PX into an operable number//such as padding-left:0px; after this line of code var Marquee_x=0;var Marquee_x=parseint (document.getElementById ("Marquee"). Style.paddingLeft.substring (0, document.getElementById ("Marquee"). Style.paddingLeft.indexOf ("px")); If you roll over the 400px position, go in the opposite direction, and vice versa if (marquee_x >400) {speed=-5;} Do not set this to 0 and may result in a cross bugif (marquee_x<15) {speed=5;} The text rolls right 5pxdocument.getelementbyid ("marquee"). style.paddingleft=marquee_x+speed+ "px";} The following controls the scrolling start and stop of the two functions//The reason for the flag is because Marqueetimer=setinterval ("Marquee_move ()", 50), multiple executions, scrolling will become very fast and uncontrollable/ The rear timer is not replaced with the front timer function marquee_move_stop () {if (ismarqueemove) {cleartimeout (marqueetimer); ismarqueemove=false;}} function Marquee_move_start () {if (!ismarqueemove) {marqueetimer=setinterval ("marquee_move ()"), ismarqueemove= true;}} </script>

Iv. Summary
1, CSS, all the band-the attributes, in JavaScript to be converted to uppercase, such as CSS padding-left in JavaScript is paddingleft, otherwise it will be treated as a minus sign
2, the use of Padding-left to complete this component, you do not use left to set absolute positioning, and then also consider how this component is placed.
3, this thing in the percentage width of the browser scroll, it is best not to do so, after all, JavaScript to remove the width of the browser may encounter a variety of compatibility issues. or set a fixed value, so the code is short.

"JavaScript" Original eco-compatible IE6 adjustable and controllable scrolling text