Update again! Msclass (class of Marquee scroll universal continuous scrolling JS Encapsulation class Ver 1.6) _javascript Tips

Source: Internet
Author: User
Update again! Msclass (class of Marquee scroll universal continuous scrolling JS Encapsulation class Ver 1.6)

/*msclass (class of Marquee scroll Universal nonbreaking scrolling JS Encapsulation Class) Ver 1.6*\

Production time: 2006-08-29 (Ver 0.5)
Release time: 2006-08-31 (Ver 0.8)
Update Time: 2007-01-31 (Ver 1.6)
Update Note: + Add function * correction, perfect
1.6.070131
+ Prevent mouse control from pausing or continuing (set the 9th argument to 1 or dynamic assignment to set SCROLLSETP to-1)
+ Determines whether scrolling is possible (automatically cancels scrolling if the content area is less than the display area)
+ Skip initialization errors (avoid causing other scrolling stops)
+ Default value (except for container ID required, other parameters can be selected according to the situation)
+ Parameter dynamic assignment (direction can be expressed in English top|bottom|left|right, make it more intuitive, convenient)
* Text scrolling inaccurate (the main purpose of this update to resolve this bug, thank Zhou Yi to participate in the test)
1.4.061211
+ Mouse Hover change scrolling direction (mouse hover control about scrolling)
* The height/width is not accurate because the document has been downloaded too slowly
* Browser compatibility issues (IE, FF, Opera, NS, Myie)
1.2.060922
+ Specify range Intermittent scrolling
* Program Adjustment
* Continuous intermittent rolling Stop error
1.0.060901
+ Scroll down and to the right
+ Start Wait Time
+ Continuous scrolling
* Adjust Time unit
* Rolling Error
* Random dead Loop
* Enhanced Performance
* Program Optimization
0.8.060829
The screen is continuous up, left scroll

Demo Address: http://www.popub.net/script/MSClass.html
Download Address: Http://www.popub.net/script/MSClass.js

Application Note: page contains <script type= "Text/javascript" src= "Msclass.js" ></script>

To create an instance:
Direct assignment method of parameters
New Marquee ("Marquee")
New Marquee ("Marquee", "top")
......
New Marquee ("Marquee", 0,1,760,52)
New Marquee ("Marquee", "Top", 1,760,52,50,5000)
......
New Marquee ("Marquee", 0,1,760,104,50,5000,3000,52)
New Marquee ("Marquee", null,null,760,104,null,5000,null,-1)

Dynamic parameter Assignment method
var marquee1 = new Marquee ("Marquee") * This parameter must be selected
Marquee1.        Direction = "Top"; or marquee1. Direction = 0;
Marquee1. Step = 1;
Marquee1. Width = 760;
Marquee1. Height = 52;
Marquee1. Timer = 50;
Marquee1. Delaytime = 5000;
Marquee1. waittime = 3000;
Marquee1. Scrollstep = 52;
Marquee1. Start ();

Parameter description:
ID "marquee" Container ID (required)
Direction (0) scrolling direction (optional, 0 up scrolling by default) can be set to include: 0,1,2,3, "top", "bottom", "left", "right" (0 up 1 down 2 to left 3 Right
Step (1) The length of the scroll (optional, the default value is 2, the larger the value, the faster the scrolling)
Width (760) container visual widths (optional, the default value is the width of the container's initial setting)
Height (52) container Visual heights (optional, the default value is the height of the container's initial setting)
Timer (50) timer (optional, the default value is 30, the smaller the value, the faster the scrolling, 1000=1 seconds, recommended not less than 20)
Delaytime (5000) Intermittent pause delay time (optional, default is 0 no pause, 1000=1 seconds)
Waittime (3000) Wait time at start (optional, default or 0 for no wait, 1000=1 seconds)
Scrollstep (52) intermittent rolling distance (optional, the default is screen width/height, the value and delay are all 0 for mouse hover control,-1 mouse control is prohibited)
Use recommendations:
1. It is suggested that the width and height of the display area of the container be directly given, such as <div id= "marquee" style= "WIDTH:760PX;HEIGHT:52PX;" >......</div>)
2, the proposal for the container to add a style overflow = auto, such as (<div id= "marquee" style= "Width:760px;height:52px;overflow:auto;" >......</div>)
3, in order to more accurately get the width and height of the scrolling area, please give each rolling unit directly to the correct width and height
4. For the horizontal scrolling of the table tag, you need to add a style to the table display = inline, such as (<div id= "marquee" style= "Width:760px;height:52px;overflow:auto;" ><table style= "Display:inline" >......</table></div>)
5, for the screen rolling or intermittent scrolling, pay attention to each rolling unit spacing, and need to the container's visual height and visual width to do accurate settings, for each rolling unit spacing can be set by the line spacing or cell height width to adjust
6, for Li Automatic line-wrapping problem for the moment there is no better solution, it is recommended to convert the form (table) to achieve the same effect
7, for the horizontal scrolling text paragraph, if the end is the space "" "" "" "" "
8, the mouse hover the idea originates from the flash, therefore has the certain limitation (inside the container only allows to use the picture or with the link picture <a></a> the form, and needs to forbid its automatic wrapping)

Thank
Zhou Yi zhoujun#yuchengtech.com (text scrolling hop bug) 2007/01/31
Since the release of this program, received a lot of friends of the Mail, put forward a lot of comments and suggestions, thank you for your support!
Very good.

However, the demo code of the New Marquee ("Marquee", 0,1,760,52,50,5000,3000) so many parameters to see the people a bit confused, oh, this model can be made to understand some people:
Copy Code code as follows:

function Marquee ()
{
This.id = document.getElementById (Arguments[0]);
This. Direction = arguments[1];
This. Step = arguments[2];
This. Width = arguments[3];
This. Height = arguments[4];
This. Timer = arguments[5];
This. waittime = arguments[6];
This. StopTime = arguments[7];
This. CTL = this. Startid = this. Stop = this. MouseOver = 0;
This. ID.style.overflowX = this. ID.style.overflowY = "hidden";
This. Id.nowrap = true;
This. ID.style.width = this. Width;
This. ID.style.height = this. Height;
This. Id.innerhtml = this. id.innerhtml;
}


Then use:
Copy Code code as follows:

var m = new Marquee;
M.id = document.getElementById ("marquee");
m.direction = 0;
M.step = 1;
M.width = 760;
// ......
M.start (M, M.timer, M.waittime, m.stoptime);

M.start's parameters seem to be related to M, can you omit it?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.