1. First write two most commonly used the most concise scroll code
The code is as follows:
Horizontal scrolling:
<marquee direction= "left" align= "bottom" height= "width=" 100% "onmouseout=" This.start () "Onmouseover=" This.stop () "scrollamount=" 2 "scrolldelay=" 1 "> Horizontal scrolling marquee content </marquee>
Vertical scrolling:
<marquee direction= "Up" height= "onmouseout=" This.start () "onmouseover=" This.stop () "scrollamount=" "1" scrolldelay= "1" > Vertical scrolling Word content </marquee>
2. Smooth continuous rolling
Copy Code code as follows:
<script language= "JavaScript" >
var tm=null
function Newsscroll () {
var Scrollimg=document.getelementbyid ("scroll")
if (scrollimg.parentnode.scrolltop!= (SCROLLIMG.CLIENTHEIGHT/2))
scrollimg.parentnode.scrolltop++;
Else
Scrollimg.parentnode.scrolltop=0
}
Window.onload=function () {
Tm=setinterval (' Newsscroll () ', 25)
}
function Stop ()
{
Clearinterval (tm)
}
function Start ()
{
Tm=setinterval (' Newsscroll () ', 25)
}
</SCRIPT>
/* STOP () Start () cannot be in the same container as the call ID, if the container does not have a default height to set the height * *
3 have stay rolling
code example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> <style type=" Text/css "> ul,li{margin:0;padding:0} # Scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border: #ccc 1px Solid;overflow:hidden} # Scrolldiv li{height:25px;padding-left:10px;} </style> <script src= "jquery-1.3.2.min.js" type= "Text/javascript" ></script> <script type= "text /javascript "> function ($) {$.fn.extend ({scroll:function (opt,callback) {//Parameter initialization if (!OPT) var opt={}; var _btnup = $ ("#" + opt.up);//shawphy: Up button var _btndown = $ ("#" + Opt.down);//shawphy: Down button var Timerid; var _this=this.eq (0). Find ("Ul:first"); var lineh=_this.find ("Li:first"). Height (),//Get row height Line=opt.line?parseint (opt.line,10):p Arseint (This.heiGht ()/lineh,10),//The number of rows per scroll, default to one screen, that is, the parent container height speed=opt.speed?parseint (opt.speed,10): 500; Scrolling speed, the larger the number, the slower the speed (milliseconds) Timer=opt.timer//?parseint (opt.timer,10): 3000; The scrolling time interval (ms) if (line==0) line=1; var Upheight=0-line*lineh; scrolling function var scrollup=function () {_btnup.unbind ("click", Scrollup);//shawphy: Cancels the function binding of the up button _this.animate ({margintop: Upheight},speed,function () {for (i=1;i<=line;i++) {_this.find ("Li:first"). Appendto (_this); } _this.css ({margintop:0}); _btnup.bind ("click", Scrollup); Shawphy: The Click event of the button on the binding direction; //shawphy: Page Down function var scrolldown=function () {_btndown.unbind ("click", Scrolldown); for (i=1;i<=line;i++) {_this.find ("Li:last"). Show (). Prependto (_this); } _this.css ({margintop:upheight}); _this.animate ({margintop:0},speed,function () {_btndown.bind ("click", Scrolldown); }); //shawphy: Automatically play var autoplay = function () {if (timer) Timerid = Window.setinterval (Scrollup,timer); }; var autostop = function () {if (timer) window.clearinterval (Timerid); }; Mouse Event BindingFixed _this.hover (autostop,autoplay). Mouseout (); _BTNUP.CSS ("cursor", "pointer"). Click (scrollup). Hover (Autostop,autoplay);//shawphy: The Up mouse event is bound to _btndown.css (" Cursor "," pointer "). Click (scrolldown). Hover (Autostop,autoplay); })}) (JQuery); $ (document). Ready (function () {$ ("#scrollDiv"). Scroll ({line:1,speed:500,timer:1000,up: "Btn1", Down: "BTN2"}); }); </script> </pead> <body> <p> Multi-line scrolling demo:</p> <div id= "Scrolldiv" > <ul> <LI&G T; This is the first line of the bulletin title </li> <li> This is the second line of the bulletin title </li> <li> This is the third line of the bulletin heading </li> <li> This is the fourth line of the bulletin heading </ Li> <li> This is the fifth line of the bulletin title </li> <li> This is the bulletin heading sixth line </li> <li> This is the announcement heading seventh line </li> <li> This is the eighth line of the bulletin title </li> </ul> </div> <span id= "BTN1" > Forward </span> <span id= "BTN2" > Back </span> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
4: A simple rolling code learning to make an example
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> non-discontinuous cycle scrolling effect </title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <style type= "text/css" > scroll{height:20px ; Overflow:hidden; font-size:12px; line-height:20px; border: #A5A5A5 1px dotted; width:120px; margin:0px Auto; Text-align:center; } </style> <script language= "javascript" type= "Text/javascript" > var s,sn=0,timer,slen,timer2; function Scrollinit () {S=getid ("S1"); S.scrolltop=0; Slen=s.innerhtml.split ("|"); S.innerhtml= ""; for (Var i=0;i<slen.length;i++) {s.innerhtml+= (slen[i]+ "");} S.INNERHTML+=SLEN[0]; Timer2=setinterval (scrollstart,3000); S.onmouseover=function () {clearinterval (timer2); clearinterval (timer); s.style.backgroundcolor= "#ccc";} S.onmouseout=function () {timer2=setinterval (scrollstart,3000); s.style.backgroundcolor= "#fff";} function Scrollstart () {if (s.scrolltop>= (slen.length*20)) {s.scrolltop=0;} Timer=setinterval (scrollexec,30); The function scrollexec () {if (sn<20) {sn++; s.scrolltop++; }else{sn=0; Clearinterval (timer); } function GetID (ID) {return document.getElementById (ID);} Window.onload=scrollinit; </script> </pead> <body> <div id= "S1" class= "scroll" > Beijing | shanghai | guangzhou | XI ' an | nanjing | dalian | harbin | Wuhan </DIV> ; </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
JS Code Description:
JavaScript code:
Copy Code code as follows:
var s,sn=0,timer,slen,timer2;
Initialization settings
function Scrollinit () {
S=getid ("S1"); Get objects that need to scroll content
S.scrolltop=0; Initialize scroll position
Slen=s.innerhtml.split ("|"); Gets the scrolling content and stores the array in order to display the calling
S.innerhtml= ""; Empty scrolling Object Contents
for (Var i=0;i<slen.length;i++) {s.innerhtml+= (slen[i]+ "<br/>");}//Format output scrolling content
S.INNERHTML+=SLEN[0];
Timer2=setinterval (scrollstart,3000); Start scrolling
S.onmouseover=function () {clearinterval (timer2); clearinterval (timer); s.style.backgroundcolor= "#ccc";}//Mouse pass, Stop scrolling, change style
S.onmouseout=function () {timer2=setinterval (scrollstart,3000); s.style.backgroundcolor= "#fff";}//mouse move, resume scrolling
}
Open scrolling Effect
function Scrollstart () {
if (s.scrolltop>= (slen.length*20)) {s.scrolltop=0;}//scroll content to the end, reset content Location
Timer=setinterval (scrollexec,30); Perform a scrolling animation effect
}
Scrolling animation effect
function Scrollexec () {
if (sn<20) {
sn++;
s.scrolltop++;
}else{
sn=0;
Clearinterval (timer);
}
}
Get an object by ID
function GetID (ID) {return document.getElementById (ID);}
When the page is loaded, the initialization is performed
Window.onload=scrollinit;
Principle Analysis:
1, first to the container set height or width, such as Div, set div high 20px;overflow:hidden;
2, the height of the container set, the content of the height of more than 20px, more than part of the overflow, is hidden, scrolltop properties available, this can be seen with overflow:scroll effect;
3, change the container scrolltop (up and down) or scrollleft (scroll) The value of the property, let the content move position (rolling principle);
4, to the height of the scroll scrolltop is greater than or equal to the height of the content, set the Scrolltop=0, let the content back to the original position, restart the rolling, non-stop cycle rolling effect appears.
