Uninterrupted rolling effect HTC

Marquee. HTC CopyCode The Code is as follows: // Description: subtitle scrolling without interruption
// Version 2.0
// Author: Baoyu (webuc. Net)
// Latest update: 2004-10-26
// Backup:

<Public: component>

<Public: attach event = "oncontentready" onevent = "f_init ()"/>
<Public: attach event = "onpropertychange" onevent = "f_propchange ()"/>
<Public: property name = "direction"/>
<Public: property name = "Speed"/>
<Public: property name = "delay"/>

<Public: method name = "marquee"/>
<Public: method name = "stop"/>
<Public: method name = "start"/>
</Public: component>

<Script language = "jscript">

VaR _ omarqueecontent;
VaR _ omarquee;
VaR _ speed = 2;

VaR _ orientation;
VaR _ direction = "up ";

VaR _ contentwidth;
VaR _ contentheight;
VaR _ marqueewidth;
VaR _ marqueeheight;
VaR _ paddingtop;

VaR _ firstnode = 1;
VaR _ COUNT = 0;

VaR _ timer = NULL;
VaR _ pause = false;

VaR _ marqueeinterval = 100; // scroll Interval
VaR _ delayinterval = 2000; // Title display delay interval

// + ----------------------------------------------------------------------------
// Function: f_init
// Description: initialization
// Parameters: NULL
// Returns: NULL
//-----------------------------------------------------------------------------
Function f_init ()
{

_ Omarquee = Document. createelement ("Div ");
_ Omarqueecontent = Document. createelement ("span ");
_ Omarqueecontent. innerhtml = element. innerhtml;
_ Omarquee. appendchild (_ omarqueecontent );
Element. innerhtml = "";
Element. appendchild (_ omarquee );

If (speed = NULL) speed = _ speed;
Speed = parseint (speed );
If (! Speed) speed = _ speed;

If (delay = NULL) Delay = _ delayinterval;
Delay = parseint (Delay );
If (! Delay) Delay = _ delayinterval;

If (Direction = NULL) Direction = _ direction;
Direction = direction. tolowercase ();
If (direction! = "Left" & direction! = "Right" & direction! = "Up" & direction! = "Down ")
Direction = _ direction;

_ Orientation = (Direction = "Left" | direction = "right ")? "Horizontal": "vertical"

Initmarquee ();

Marquee ();
}

Function initmarquee ()
{

_ Marqueewidth = _ omarquee. offsetwidth;
_ Marqueeheight = _ omarquee. offsetheight;
_ COUNT = _ omarqueecontent. Children. length;

_ Contentwidth = _ omarqueecontent. offsetwidth;
_ Contentheight = _ omarqueecontent. offsetheight;

_ Paddingtop = _ omarquee. offsettop;

Fillmarquee ()

_ Omarqueecontent. style. Position = "relative ";
_ Omarqueecontent. style. pixeltop = 0;

}

Function fillmarquee ()
{
VaR children = _ omarqueecontent. Children;
VaR I = 0;

If (_ Orientation = "horizontal ")
{
While (_ omarqueecontent. offsetwidth <_ contentwidth + _ marqueewidth)
{
_ Omarqueecontent. appendchild (Children [I ++]. clonenode (true ));
}
}
Else
{
While (_ omarqueecontent. offsetheight <_ contentheight + _ marqueeheight)
{
_ Omarqueecontent. appendchild (Children [I ++]. clonenode (true ));
}
}
}

Function marquee ()
{
If (_ pause)
Return;

Switch (direction)
{
Case "up ":
_ Omarqueecontent. style. pixeltop-= speed;
If (math. Abs (_ omarqueecontent. style. pixeltop + _ contentheight + _ paddingtop) <speed)
_ Omarqueecontent. style. pixeltop = 0;

If (math. Abs (_ omarqueecontent. Children [_ firstnode]. offsettop)-_ paddingtop <speed)
{
_ Firstnode ++;
If (_ firstnode> = _ count)
_ Firstnode = 0;

_ Timer = Window. setTimeout (uniqueid + ". marquee ()", _ delayinterval );
}
Else
_ Timer = Window. setTimeout (uniqueid + ". marquee ()", _ marqueeinterval );
Break;
}
}

Function stop ()
{
Cleartimer ();
_ Pause = true;
}

Function start ()
{
If (_ timer! = NULL)
Cleartimer ();

_ Pause = false;

Marquee ();

}

Function cleartimer ()
{
Window. cleartimeout (_ timer );
_ Timer = NULL;
}

//
// Cancels an event
//
Function f_cancelevent ()
{
Event. returnvalue = false;
}

//
// A property changed
//
Function f_propchange ()
{
Switch (event. propertyname)
{
Default:
F_redraw ();
Break;
}
}

//
// Forces a redraw of the control
//
Function f_redraw ()
{

}

</SCRIPT>

HTML fileCopy codeThe Code is as follows: <style>
Body, TD {
Font-size: 9pt;
}

. Marquee {
Overflow-Y: hidden; Word-break: Break-all; padding: 10px;
Behavior: URL ('marquee. HTC ');
}
. Marquee Div {
Padding-bottom: 10px;
}
</Style>
Uninterrupted rolling <br/>
There is a gap between each title <br/>
Move the mouse to stop, move the mouse to continue rolling <br/>

<Span style = "height: 100px; width: 200px; Border: 1px solid black;" delay = "3000" class = "marquee" onmouseover = "this. stop () "onmouseout =" this. start () ">
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 1. Baoyu (http://www.webuc.net) Works </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 2. Cooperate with each other to boost the informatization construction in Shanghai Construction Field </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 3. Grand Lida list tendering and bidding strategy seminar -- Henan station successfully </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 4. Football friendly match: Hebei dianjian company vs guanglianda Shijiazhuang branch </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 5. The new version of gcl7.0 is released! </A> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 6. Good news: guanglianda successfully passed the three-year review of ISO9000 Quality Management System </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 7. guanglianda-successful application of the overall configuration solution in Beijing cost-effectiveness consulting company </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 8. guanglianda-Application of gcm in the rongzun Fort project </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 9. guang lianda-application of project budget estimate software in the Oriental Plaza project of Beijing Construction Engineering Group Corporation </a> </div>
<Div> <a href = "http://www.webuc.net" target = "_ blank"> 10. Rows </a> </div>
</Span>
<SCRIPT>

</SCRIPT>