Javascript multi-line news scrolling effect code

Source: Internet
Author: User

This article introduces you to a javascript multi-line news rolling effect code. The compatibility is not good, and the calling method is also very simple. Let's take a look at the example.

The Code is as follows: Copy code


<Html>
<Head>
<Title> javascript code for multi-line news scrolling effect </title>
<Style>
Td {font-size: 12px ;}
</Style>
</Head>
<Body>
<Script>

/*************************************** *********************
* Rolling Effect
* Note: All parameters are required.
* @ Param {string} id: ID of the rolling layer to be bound
* @ Param direction {string/number} ction scroll direction top/up/0: up; bottom/down/1: down; left/2: left; right/3: right
* @ Param {number} Step rolling speed. The default value is 1. The larger the value, the slower the rolling speed.
* @ Param {number} width specifies the width of the scrolling layer. If it is set to 0, the width of the layer specified by the ID parameter is used.
* @ Param {number} height the height of the rolling layer. If it is set to 0, the height of the layer specified by the ID parameter is used.
* @ Param {number} timer rolling speed. The interval for moving 1 pixel is 30 milliseconds by default. If it is less than 20, it is 20.
* @ Param {number} delaytime the number of milliseconds between each scroll, usually 3000
* @ Param {number} waittime the number of seconds to wait before the first rolling, in milliseconds. The default value is 800. If it is less than 800, It is the default value.
* @ Param {number} The number of shards that scrollstep rolls each time
*
* @ Example
*

<Script defer>
New EAMarquee ("olist", 331,160, 5000,200 );
</Script>
<Div>
**************************************** **************************************** *********/
Function EAMarquee ()
{
This. ID = document. getElementById (arguments [0]);
If (! This. ID)
{
// Alert ("the" you want to set "+ arguments [0] +" "initialization error rn please check whether the tag ID settings are correct! ");
This. ID =-1;
Return;
}
This. Direction = this. Width = this. Height = this. DelayTime = this. WaitTime = this. CTL = this. StartID = this. Stop = this. MouseOver = 0;
This. Step = 1;
This. Timer = 30;
This. direarray array = {"top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3 };
If (typeof arguments [1] = "number" | typeof arguments [1] = "string") this. Direction = arguments [1];
If (typeof arguments [2] = "number") this. Step = arguments [2];
If (typeof arguments [3] = "number") this. Width = arguments [3];
If (typeof arguments [4] = "number") this. Height = arguments [4];
If (typeof arguments [5] = "number") this. Timer = arguments [5];
If (typeof arguments [6] = "number") this. DelayTime = arguments [6];
If (typeof arguments [7] = "number") this. WaitTime = arguments [7];
If (typeof arguments [8] = "number") this. ScrollStep = arguments [8];
This. ID. style. overflow = this. ID. style. overflowX = this. ID. style. overflowY = "hidden ";
This. ID. noWrap = true;
This. IsNotOpera = (navigator. userAgent. toLowerCase (). indexOf ("opera") =-1 );
If (arguments. length> = 7) this. Start ();
}

EAMarquee. prototype. Start = function ()
{
If (this. ID =-1) return;
If (this. WaitTime <800) this. WaitTime = 800;
If (this. Timer <20) this. Timer = 20;
If (this. Width = 0) this. Width = parseInt (this. ID. style. width );
If (this. Height = 0) this. Height = parseInt (this. ID. style. height );
If (typeof this. Direction = "string") this. Direction = this. DirectionArray [this. Direction. toString (). toLowerCase ()];
This. HalfWidth = Math. round (this. Width/2 );
This. HalfHeight = Math. round (this. Height/2 );
This. BakStep = this. Step;
This. ID. style. width = this. Width + "px ";
This. ID. style. height = this. Height + "px ";
If (typeof this. ScrollStep! = "Number") this. ScrollStep = this. Direction> 1? This. Width: this. Height;
Var templateLeft = "<table cellspacing = '0' cellpadding = '0' border = '0' style = 'border-collapse: collapse; display: inline; '> <tr> <td noWrap = true style = 'white-space: nowrap; word-break: keep-all; '> MSCLASS_TEMP_HTML </td> <td noWrap = true style = 'white-space: nowrap; word-break: keep-all; '> MSCLASS_TEMP_HTML </td> </tr> </table> ";
Var templateTop = "<table cellspacing = '0' cellpadding = '0' boder = '0' style = 'border-collapse: collapse; '> <tr> <td> MSCLASS_TEMP_HTML </td> </tr> </table> ";
Var msobj = this;
Msobj. tempHTML = msobj. ID. innerHTML;
If (msobj. Direction <= 1)
{
Msobj. ID. innerHTML = templateTop. replace (/MSCLASS_TEMP_HTML/g, msobj. ID. innerHTML );
}
Else
{
If (msobj. ScrollStep = 0 & msobj. DelayTime = 0)
{
Msobj. ID. innerHTML + = msobj. ID. innerHTML;
}
Else
{
Msobj. ID. innerHTML = templateLeft. replace (/MSCLASS_TEMP_HTML/g, msobj. ID. innerHTML );
}
}
Var timer = this. Timer;
Var delaytime = this. DelayTime;
Var waittime = this. WaitTime;
Msobj. StartID = function () {msobj. Scroll ()}
Msobj. Continue = function ()
{
If (msobj. MouseOver = 1)
{
SetTimeout (msobj. Continue, delaytime );
}
Else
{ClearInterval (msobj. TimerID );
Msobj. CTL = msobj. Stop = 0;
Msobj. TimerID = setInterval (msobj. StartID, timer );
}
}

Msobj. Pause = function ()
{
Msobj. Stop = 1;
ClearInterval (msobj. TimerID );
SetTimeout (msobj. Continue, delaytime );
}

Msobj. Begin = function ()
{
Msobj. ClientScroll = msobj. Direction> 1? Msobj. ID. scrollWidth/2: msobj. ID. scrollHeight/2;
If (msobj. direction <= 1 & msobj. clientScroll <= msobj. height + msobj. step) | (msobj. direction> 1 & msobj. clientScroll <= msobj. width + msobj. step )){
Msobj. ID. innerHTML = msobj. tempHTML;
Delete (msobj. tempHTML );
Return;
}
Delete (msobj. tempHTML );
Msobj. TimerID = setInterval (msobj. StartID, timer );
If (msobj. ScrollStep <0) return;
Msobj. ID. onmousemove = function (event)
{
If (msobj. ScrollStep = 0 & msobj. Direction> 1)
{
Var event = event | window. event;
If (window. event)
{
If (msobj. IsNotOpera)
{
Msobj. EventLeft = event. srcElement. id = msobj. ID. id? Event. offsetX-msobj. ID. scrollLeft: event. srcElement. offsetLeft-msobj. ID. scrollLeft + event. offsetX;
}
Else
{
Msobj. ScrollStep = null;
Return;
}
}
Else
{
Msobj. EventLeft = event. layerX-msobj. ID. scrollLeft;
}
Msobj. Direction = msobj. EventLeft> msobj. HalfWidth? 3: 2;
Msobj. AbsCenter = Math. abs (msobj. HalfWidth-msobj. EventLeft );
Msobj. Step = Math. round (msobj. AbsCenter * (msobj. BakStep * 2)/msobj. HalfWidth );
}
}
Msobj. ID. onmouseover = function ()
{
If (msobj. ScrollStep = 0) return;
Msobj. MouseOver = 1;
ClearInterval (msobj. TimerID );
}
Msobj. ID. onmouseout = function ()
{
If (msobj. ScrollStep = 0)
{
If (msobj. Step = 0) msobj. Step = 1;
Return;
}
Msobj. MouseOver = 0;
If (msobj. Stop = 0)
{
ClearInterval (msobj. TimerID );
Msobj. TimerID = setInterval (msobj. StartID, timer );
}
}
}
SetTimeout (msobj. Begin, waittime );
}

EAMarquee. prototype. Scroll = function ()
{
Switch (this. Direction)
{
Case 0:
This. CTL + = this. Step;
If (this. CTL> = this. ScrollStep & this. DelayTime> 0)
{
This. ID. scrollTop + = this. ScrollStep + this. Step-this. CTL;
This. Pause ();
Return;
}
Else
{
If (this. ID. scrollTop> = this. ClientScroll)
{
This. ID. scrollTop-= this. ClientScroll;
}
This. ID. scrollTop + = this. Step;
}
Break;

Case 1:
This. CTL + = this. Step;
If (this. CTL> = this. ScrollStep & this. DelayTime> 0)
{
This. ID. scrollTop-= this. ScrollStep + this. Step-this. CTL;
This. Pause ();
Return;
}
Else
{
If (this. ID. scrollTop <= 0)
{
This. ID. scrollTop + = this. ClientScroll;
}
This. ID. scrollTop-= this. Step;
}
Break;

Case 2:
This. CTL + = this. Step;
If (this. CTL> = this. ScrollStep & this. DelayTime> 0)
{
This. ID. scrollLeft + = this. ScrollStep + this. Step-this. CTL;
This. Pause ();
Return;
}
Else
{
If (this. ID. scrollLeft> = this. ClientScroll)
{
This. ID. scrollLeft-= this. ClientScroll;
}
This. ID. scrollLeft + = this. Step;
}
Break;

Case 3:
This. CTL + = this. Step;
If (this. CTL> = this. ScrollStep & this. DelayTime> 0)
{
This. ID. scrollLeft-= this. ScrollStep + this. Step-this. CTL;
This. Pause ();
Return;
}
Else
{
If (this. ID. scrollLeft <= 0)
{
This. ID. scrollLeft + = this. ClientScroll;
}
This. ID. scrollLeft-= this. Step;
}
Break;
}
}
</Script>
<Div>
<Ul id = "olist" style = "font-size: 12px;">
<Li> <B> [Bosch] </B> Chengdu Guohui Trading Co., Ltd. </li>
<Li> <B> [mingguang brand] </B> Chengdu mingguang bellows Co., Ltd. </li>
<Li> <B> [chengsu] </B> Chengdu three Power Co., Ltd. (Sichuan cable factory) </li>
<Li> <B> [Five Stars] </B> botou Five Star High Temperature Oil Pump Plant Chengdu Office </li>
<Li> <B> [Yousheng] </B> Chengdu Shengda Weighing Apparatus Operations Department </li>
<Li> <B> [Three Gorges] </B> Chengdu Dongyuan building materials and chemical industry department </li>
<Li> <B> [Renault] </B> SHUNFA electric tools firm </li>
<Li> <B> [Bosch] </B> Chengdu Guohui Trading Co., Ltd. </li>
<Li> <B> [mingguang brand] </B> Chengdu mingguang bellows Co., Ltd. </li>
<Li> <B> [chengsu] </B> Chengdu three Power Co., Ltd. (Sichuan cable factory) </li>
<Li> <B> [Five Stars] </B> botou Five Star High Temperature Oil Pump Plant Chengdu Office </li>
<Li> <B> [Yousheng] </B> Chengdu Shengda Weighing Apparatus Operations Department </li>
<Li> <B> [Three Gorges] </B> Chengdu Dongyuan building materials and chemical industry department </li>
<Li> <B> [Renault] </B> SHUNFA electric tools firm </li>
</Ul>
<Script defer>
New EAMarquee ("olist", 331,160, 5000,200 );
</Script>
<Div>
</Body>
</Html>

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.