IE scroll up/down display imitating Marquee mechanism _ javascript skills

Source: Internet
Author: User
Recently, I want to present a list of up and down Scrolling on a large screen. The Marquee provided by IE cannot meet the requirements. I wrote a rolling mechanism with my own code in the attachment. The Code is as follows:


Var STARTINGOPACITY = 40; // sets the opacity.
Var STARTINP = 70; // sets the transparency.
Var SCROLLSTUP = 1; // The scroll speed. 1 is a pixel.
Var SCROLLSYY = 100; // rolling time request
Var reqflg = false;

// Handles manual scrolling of the content //
Function scrollContent (parp, id, sub ){
Var p = document. getElementById ("textslider ");
Var psub = document. getElementById (sub );
Var PHA = document. getElementById (parp );

ClearInterval (p. timer );
P. style. opacity = STARTINGOPACITY *. 01;
P. style. filter = 'Alpha (opacity = '+ STARTINP + ')';
Var p2 = document. getElementById ("textslider2 ");
If (p2! = Null ){
ClearInterval (p2.timer );
P2.style. opacity = STARTINGOPACITY *. 01;
P2.style. filter = 'Alpha (opacity = '+ STARTINP + ')';
}

Var tem = p. innerHTML; // The first page
Tem1 ="

"+ Tem +"

"; // Second page

Var objheight = PHA. offsetHeight;
Var pheight = p. offsetHeight;

// Determine whether to scroll the screen. If not, do not scroll.
If (objheight If (! Reqflg ){
PLT. innerHTML + = tem1;
Reqflg = true;
P = document. getElementById ("textslider ");
P2 = document. getElementById ("textslider2 ");
// Set the height
P2.style. top = pheight-1 + "px ";
}
P. timer = setTimeout (function () {scrollAnimate (p, p2)}, SCROLLSYY );
}
}
Function scrollAnimate (p, p2 ){
// Obtain the top values of two subp values
Var ptop = p. offsetTop;
// Alert (ptop );
If (ptop = 0 ){
P. style. top = "0px ";
Ptop = 0;
}
Var p2top = p2.offsetTop;
If (p2top = 0 ){
P2top = 0;
P2.style. top = "0px ";
}
If (ptop // The first part is in the top part. The second part is in the bottom part.
P. style. top = ptop-SCROLLSTUP + 'px ';
P2.style. top = p2top-SCROLLSTUP + 'px ';
// Alert ("p. style. top: "+ p. style. top + "--- p2.style. top: "+ p2.style. top + ": height:" + p. offsetHeight );
// Determine whether to switch the position. If the height and position are equal to the top, switch
If (p. offsetTop =-p. offsetHeight ){
// Set top to bottom
P. style. top = p2.offsetHeight;
}
} Else {
// Number 2 is above and number 1 is below
P2.style. top = p2top-SCROLLSTUP + 'px ';
P. style. top = ptop-SCROLLSTUP + 'px ';
// Determine whether to switch the position. If the height and position are equal to the top, switch
If (p2.offsetTop =-p2.offsetHeight ){
// Set top to bottom
P2.style. top = p. offsetHeight;
}
}
P. timer = setTimeout (function () {scrollAnimate (p, p2)}, SCROLLSYY );
}

// Cancel the scrolling on mouseout //
Function cancelScroll (parp, id, sub ){
Var p = document. getElementById (id );
P. style. opacity = 1;
P. style. filter = 'Alpha (opacity = 100 )';
ClearTimeout (p. timer );

Var p2 = document. getElementById ("textslider2 ");
If (p2! = Null ){
P2.style. opacity = 1;
P2.style. filter = 'Alpha (opacity = 100 )';
ClearTimeout (p2.timer );
}
}


Package and download code

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.