The example of this article describes the original ecological compatible IE6 adjustable and controllable scrolling text function implemented by JavaScript. Share for your reference, the details are as follows:
Although there is a marquee tag in HTML itself, which is used to set scrolling text (the marquee tag will be described in detail in the appendix [HTML Unpopular Tags and Attributes]). This tag is not supported in IE8, and the things that can be set in IE6 are also Very few, so it's better to write this thing in javascript. This small component is also relatively common, but the code quality on the Internet still adds a lot of unnecessary code for a lot of insignificant little effects. In fact, for this thing, you only need to make it scroll right and left by yourself, and automatically return to the edge of the screen. Why write a lot of code for some flashy things that fade in and out? The following introduces a self-written scrolling text using padding-left, because padding-left is still no problem in most browsers.
1. Basic goals
As shown in the figure below, the text can scroll seamlessly in the area of 15px-400px every 0.05s, 5px pixels. Of course, if you change the script below, you can let me scroll from the earth to outer space. No problem, as long as you tell me The px of the earth and the px of outer space are enough, and then set two buttons, you click "stop" and it stops, after stopping, click "start" to let it start, it is in the "start" state, you click N under "start" "There will be no bugs, continue to maintain this state, it is in the "stop" state, there is no problem if you click "stop".
Second, the HTML layout
code show as below:
marqueestop
Start
The idea is as follows: a picture is worth a thousand words. Please compare the code with the picture yourself.
3. Script part
Here is the core of the whole control.
//Set its scrolling speed to 5px/0.05s, so that seamless scrolling can be achieved, and it will not be stuck one by one.
var speed=5;
var marqueeTimer=setInterval("marquee_move()",50);
//This variable is mainly used for the following two functions that control the start and stop of scrolling
var isMarqueeMove = true;
//滚动的核心函数
function marquee_move(){
//这么长的代码主要是为了把带px的padding-left转化为一个可以操作的数
//如padding-left:0px;经过这一行代码之后var marquee_x=0;
var marquee_x=parseInt(document.getElementById("marquee").style.paddingLeft.substring(0,document.getElementById("marquee").style.paddingLeft.indexOf("px")));
//如果滚过400px这个位置，那就向反方向走，反之亦然
if(marquee_x>400){
speed=-5;
}
//这里不要设置成0，可能会产生越界bug
if(marquee_x<15){
speed=5;
}
//文字向右滚5px
document.getElementById("marquee").style.paddingLeft=marquee_x+speed+"px";
}
//下面控制滚动开始与停止的两个函数
//之所以要立flag，是因为marqueeTimer=setInterval("marquee_move()",50);多次被执行，滚动会变得很快和无法控制
//后方的计时器不会替换到前方的计时器
function marquee_move_stop(){
if(isMarqueeMove){
clearTimeout(marqueeTimer);
isMarqueeMove=false;
}
}
function marquee_move_start(){
if(!isMarqueeMove){
marqueeTimer=setInterval("marquee_move()",50);
isMarqueeMove=true;
}
}
4. Summary
1. In CSS, all attributes with - should be changed to uppercase in javascript. For example, the padding-left of CSS is paddingLeft in javascript, otherwise it will be treated as a minus sign
2. Use padding-left to complete this component, you don't need to use left to set absolute positioning, and then consider how to place this component.
3. This thing scrolls within the browser's percentage width. It is best not to do this. After all, taking out the browser's width in javascript may encounter various compatibility problems. Or set a fixed value, so the code is short.
Attachment: HTML comparison of unpopular tags and attributes
1.
Labels can add a horizontal divider. Single tag label, with attributes width, size, color, align (followed by value) noshade (add directly, such as disabled of the text box, indicating that this horizontal line is shadowless)
2. The label has been abolished by Microsoft.
This guy from Microsoft has given up support for MARQUEE under the latest IE8 (I am speechless here, MARQUEE was created by Microsoft itself, and now Firefox supports it, it quits it by itself)
There are many problems with using marquee. DW gives you a hint to warn you to be cautious.
For example, there is a problem with the scrolling of IE8 in the following code. When the picture is scrolled, it will be automatically refreshed, which is quite ugly and cannot be scrolled seamlessly.
scroll
3. Tags are emphasis tags, based on content. is the physical style. Double mark tags can make font superscript and subscript separately
4. © is the copyright character ©, ® is a registered trademark, is a space
5. For pictures, the hspace attribute can set the spacing between pictures.
6.
The label is also a vlink link with attributes. It can set the color of the visited and unvisited hyperlinks respectively. Leftmargin and topmargin can respectively specify the left margin and top margin of the document.7. Can set the keywords and web page descriptions crawled by search engines respectively
I hope this article will help you in JavaScript programming.