JavaScript seamlessly scroll up and down Gao Dingkuan Pause effect (compatible IE/FF)
<! 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>javascript seamless up and down rolling Gao Dingkuan pause effect (compatible ie/ff) </title> </pead> <body> < SCRIPT type=text/javascript> var $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; var Class = {Create:function () {return function () {this.initialize.apply (this, arguments); }} object.extend = function (destination, source) {for (var property in source) {Destination[property] = Source[p Roperty]; return destination; } function addEventHandler (Otarget, Seventtype, Fnhandler) {if (Otarget.addeventlistener) {Otarget.addeventlistener (s) EventType, Fnhandler, false); else if (otarget.attachevent) {otarget.attachevent ("on" + Seventtype, Fnhandler); } ElSE {otarget["on" + seventtype] = Fnhandler; } }; var scroller = Class.create (); Scroller.prototype = {initialize:function (Idscroller, Idscrollmid, options) {var othis = this, Oscroller = $ (idscroll ER), Oscrollmid = $ (idscrollmid); This. SetOptions (options); This. Side = This.options.Side | | ["Up"];//direction this.scroller = Oscroller; Object this.speed = This.options.Speed; Speed This.timer = null; Time This.pauseheight = 0; Fixed height this.pausewidth = 0; Fixed width this.pause = 0; Fixed height (wide) this.side = 0; Parameters//For scrolling up and down This.heightscroller = parseint (oScroller.style.height) | | Oscroller.offsetheight; This.heightlist = Oscrollmid.offsetheight; For left and right scrolling This.widthscroller = parseint (oScroller.style.width) | | Oscroller.offsetwidth; This.widthlist = Oscrollmid.offsetwidth; JS does not get the CSS set height and width oScroller.style.overflow = "hidden"; Oscrollmid.appendchild (Oscrollmid.clonenode (true)); Oscrollmid.appendchild (Oscrollmid.clonenode (true)); addEventHandler (Oscroller, "mouseover", FunctiOn () {othis.stop ();}); addEventHandler (Oscroller, "mouseout", function () {Othis.start ();}); This. Start (); },//Set default properties Setoptions:function (options) {this.options = {//default value step:1,//the PX amount per change speed:20,//speed (bigger and slower) Side: ["Up "],//Scrolling Direction:" "Up" is on, "down" is down, "left" is the right, is the right-hand pauseheight:0,//how high to stop once pausewidth:0,//the wide stop one time// The pauseheight and Pausewidth must be set to set the turn position pausestep:3000//pause time (pauseheight or pausewidth greater than 0 for this parameter to be valid) when used together up and down. Object.extend (this.options, Options | | {}); The///steering Turn:function () {//) is diverted to this by setting the arrangement of the array of directions. Side.push (this. Side.shift (). toLowerCase ()); },//Up and down scrolling scrollupdown:function () {this.pause = This.pauseheight; This.scroller.scrollTop = this. Getscroll (This.scroller.scrollTop, This.heightscroller, This.heightlist, this.options.PauseHeight); This.pauseheight = This.pause; var othis = this; This.timer = Window.settimeout (function () {Othis.start ();}, This.speed); },//left-right scrolling scrollleftright:function () {this.pause = This.pausewidth; Note: ScrolllefT more than 1400 will automatically change back to 1400 note length This.scroller.scrollLeft = this. Getscroll (This.scroller.scrollLeft, This.widthscroller, This.widthlist, this.options.PauseWidth); This.pausewidth = This.pause; var othis = this; This.timer = Window.settimeout (function () {Othis.start ();}, This.speed); },//Get Set scrolling data getscroll:function (Iscroll, Iscroller, IList, ipause) {var istep = This.options.Step * this.side; if (This.side > 0) {if (Iscroll >= (iList * 2-iscroller)) {iscroll-= iList;} else {if (iscroll <= 0) {iscroll + = iList;} } this.speed = This.options.Speed; if (Ipause > 0) {if (Math.Abs (this.pause) >= ipause) {this.speed = This.options.PauseStep; this.pause = istep = 0; t His. Turn (); else {this.pause + = Istep; } return (Iscroll + istep); },//Start start:function () {//document.getelementbyid ("test"). innerhtml+=sturn+ ","; Orientation Settings switch (this. Side[0].tolowercase ()) {case ' right ': if (This.widthlist < This.widthscroller) return; This.side =-1; This. SCrollleftright (); Break Case ' left ': if (This.widthlist < This.widthscroller) return; This.side = 1; This. Scrollleftright (); Break Case ' down ': if (This.heightlist < This.heightscroller) return; This.side =-1; This. Scrollupdown (); Break Case ' up ': Default:if (This.heightlist < This.heightscroller) return; This.side = 1; This. Scrollupdown (); },//Stop stop:function () {cleartimeout (This.timer); } }; </SCRIPT> <STYLE> body {font-size:12px;} . scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px 10px; height:20px; width:400px;} . Scroller *{margin:0px; padding:0px;} . Scrollmid {float:left;} . Scrollmid Ul{width:400px;float:left;} . Scrollmid li{list-style:none; float:left; width:390px; padding-left:10px;line-height:20px;} </STYLE> <div class=scroller id=idscroller> <div > <div class=scrollmid id=idscrollmid> <UL > <LI> Shunde was approved as the pilot of comprehensive reform in Guangdong Province in 1993. </LI> <li>2006 Shunde became the first GDP of more than 10 of the county administrative units. </LI> <li>2000 to 2003, Shunde is ranked top of China's top hundred counties. </LI> <li>2005 in Shunde to achieve a GDP of 85.611 billion yuan. </LI></UL></DIV></DIV></DIV> <SCRIPT> New Scroller ("Idscroller", "Idscrollmid") , {side:["Up", "" "], Pauseheight:20, pausewidth:400}); </SCRIPT> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
JavaScript Seamless scrolling around Gao Dingkuan Pause effect (compatible with IE/FF)
<! 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>javascript seamless rolling Gao Dingkuan Pause effect (compatible ie/ff) </title> </pead> <body> < SCRIPT type=text/javascript> var $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; var Class = {Create:function () {return function () {this.initialize.apply (this, arguments); }} object.extend = function (destination, source) {for (var property in source) {Destination[property] = Source[p Roperty]; return destination; } function addEventHandler (Otarget, Seventtype, Fnhandler) {if (Otarget.addeventlistener) {Otarget.addeventlistener (s) EventType, Fnhandler, false); else if (otarget.attachevent) {otarget.attachevent ("on" + Seventtype, Fnhandler); } ElSE {otarget["on" + seventtype] = Fnhandler; } }; var scroller = Class.create (); Scroller.prototype = {initialize:function (Idscroller, Idscrollmid, options) {var othis = this, Oscroller = $ (idscroll ER), Oscrollmid = $ (idscrollmid); This. SetOptions (options); This. Side = This.options.Side | | ["Up"];//direction this.scroller = Oscroller; Object this.speed = This.options.Speed; Speed This.timer = null; Time This.pauseheight = 0; Fixed height this.pausewidth = 0; Fixed width this.pause = 0; Fixed height (wide) this.side = 0; Parameters//For scrolling up and down This.heightscroller = parseint (oScroller.style.height) | | Oscroller.offsetheight; This.heightlist = Oscrollmid.offsetheight; For left and right scrolling This.widthscroller = parseint (oScroller.style.width) | | Oscroller.offsetwidth; This.widthlist = Oscrollmid.offsetwidth; JS does not get the CSS set height and width oScroller.style.overflow = "hidden"; Oscrollmid.appendchild (Oscrollmid.clonenode (true)); Oscrollmid.appendchild (Oscrollmid.clonenode (true)); addEventHandler (Oscroller, "mouseover", FunctiOn () {othis.stop ();}); addEventHandler (Oscroller, "mouseout", function () {Othis.start ();}); This. Start (); },//Set default properties Setoptions:function (options) {this.options = {//default value step:1,//the PX amount per change speed:20,//speed (bigger and slower) Side: ["Up "],//Scrolling Direction:" "Up" is on, "down" is down, "left" is the right, is the right-hand pauseheight:0,//how high to stop once pausewidth:0,//the wide stop one time// The pauseheight and Pausewidth must be set to set the turn position pausestep:3000//pause time (pauseheight or pausewidth greater than 0 for this parameter to be valid) when used together up and down. Object.extend (this.options, Options | | {}); The///steering Turn:function () {//) is diverted to this by setting the arrangement of the array of directions. Side.push (this. Side.shift (). toLowerCase ()); },//Up and down scrolling scrollupdown:function () {this.pause = This.pauseheight; This.scroller.scrollTop = this. Getscroll (This.scroller.scrollTop, This.heightscroller, This.heightlist, this.options.PauseHeight); This.pauseheight = This.pause; var othis = this; This.timer = Window.settimeout (function () {Othis.start ();}, This.speed); },//left-right scrolling scrollleftright:function () {this.pause = This.pausewidth; Note: ScrolllefT more than 1400 will automatically change back to 1400 note length This.scroller.scrollLeft = this. Getscroll (This.scroller.scrollLeft, This.widthscroller, This.widthlist, this.options.PauseWidth); This.pausewidth = This.pause; var othis = this; This.timer = Window.settimeout (function () {Othis.start ();}, This.speed); },//Get Set scrolling data getscroll:function (Iscroll, Iscroller, IList, ipause) {var istep = This.options.Step * this.side; if (This.side > 0) {if (Iscroll >= (iList * 2-iscroller)) {iscroll-= iList;} else {if (iscroll <= 0) {iscroll + = iList;} } this.speed = This.options.Speed; if (Ipause > 0) {if (Math.Abs (this.pause) >= ipause) {this.speed = This.options.PauseStep; this.pause = istep = 0; t His. Turn (); else {this.pause + = Istep; } return (Iscroll + istep); },//Start start:function () {//document.getelementbyid ("test"). innerhtml+=sturn+ ","; Orientation Settings switch (this. Side[0].tolowercase ()) {case ' right ': if (This.widthlist < This.widthscroller) return; This.side =-1; This. SCrollleftright (); Break Case ' left ': if (This.widthlist < This.widthscroller) return; This.side = 1; This. Scrollleftright (); Break Case ' down ': if (This.heightlist < This.heightscroller) return; This.side =-1; This. Scrollupdown (); Break Case ' up ': Default:if (This.heightlist < This.heightscroller) return; This.side = 1; This. Scrollupdown (); },//Stop stop:function () {cleartimeout (This.timer); } }; </SCRIPT> <STYLE> body {font-size:12px;} . scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px 10px; height:20px; width:400px;} . Scroller *{margin:0px; padding:0px;} . Scrollmid {float:left;} . Scrollmid Ul{width:800px;float:left;} . Scrollmid li{list-style:none; float:left; width:390px; padding-left:10px;line-height:20px;} </STYLE> <div class=scroller id=idscroller> <div > <div class=scrollmid id=idscrollmid> <UL > <LI> Shunde was approved as the pilot of comprehensive reform in Guangdong Province in 1993. </LI> <li>2006 Shunde became the first GDP of more than 10 of the county administrative units. </LI> <li>2000 to 2003, Shunde is ranked top of China's top hundred counties. </LI> <li>2005 in Shunde to achieve a GDP of 85.611 billion yuan. </LI></UL></DIV></DIV></DIV> <SCRIPT> New Scroller ("Idscroller", "Idscrollmid") , {side:[' up ', ' left '], pauseheight:20, pausewidth:400}); </SCRIPT> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
