Tip: you can modify some code before running
<div class="demo-container"> <!--************************************* 实例代码开始 *************************************--><style type="text/css">/* Example CSS for the two demo scrollers */# pscroller1 {width: 200px; height: 100px; border: 1px solid black; padding: 5px; background-color: lightyellow ;} # pscroller2 {width: Pixel px; height: 22px; border: 1px solid black; padding: 3px ;}# pscroller2 a {text-decoration: none ;}. someclass {// class to apply to your scroller (s) if desired}</style> <script type="text/javascript">/* Example message arrays for the two demo scrollers */var pausecontent = new Array () pausecontent [0] = 'Art map<br />Enjoy high-quality pictures of foreign art masters. Enjoy the classic masterpiece and the artistic life. 'Pausecontent [1] = '111cn. net<br />Include the classic short-lived code and translate and repost excellent foreign technical articles. 'Var pausecontent2 = new Array () pausecontent2 [0] = '[Art Map] views high-quality foreign art masters. Enjoy the classic masterpiece and the artistic life. 'Pausecontent2 [1] = '[111cn.net] contains the classic short-segment code and translates and reposts excellent foreign technical articles. '</script><script type="text/javascript">/*************************************** * ******** Pausing up-down scroller -? Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/for this script and 100 s more. **************************************** * *****/function pausescroller (content, divId, divClass, delay) {this. content = content // message array contentthis. tickerid = divId // ID of ticker div to display informationthis. delay = delay // Delay between msg change, in miliseconds. this. mouseoverBol = 0 // Boolean to indicate whether mouse is currently over scroller (and pause it if it is) this. hiddendivpointer = 1 // index of message array for hidden divdocument. write ('<div id="'+divId+'" class="'+divClass+'" ><div class="innerDiv" id="'+divId+'1">'+ Content [0] +'</div><div class="innerDiv" id="'+divId+'2">'+ Content [1] +'</div></div>') Var scrollerinstance = thisif (window. addEventListener) // run onload in DOM2 browserswindow. addEventListener ("load", function () {scrollerinstance. initialize ()}, false) else if (window. attachEvent) // run onload in IE5.5 + window. attachEvent ("onload", function () {scrollerinstance. initialize ()}) else if (document. getElementById) // if legacy DOM browsers, just start scroller after 0.5 secsetTimeout (function ( ) {Scrollerinstance. initialize ()}, 500)} // --------------------------------------------------------------------- // initialize ()-Initialize scroller method. //-Get div objects, set initial positions, start up down animation // ------------------------------------------------------------------- pausescroller. prototype. initialize = function () {this. tickerdiv = document. getElementById (this. tickerid) this. visibl Ediv = document. getElementById (this. tickerid + "1") this. hiddendiv = this. hiddendiv = document. getElementById (this. tickerid + "2") this. visibledivtop = parseInt (pausescroller. getCSSpadding (this. tickerdiv) // set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this. visiblediv. style. width = this. hiddendiv. style. width = this. tickerdiv. offsetWidth-(this. visibledivtop * 2) + "px" This. getinline (this. visiblediv, this. hiddendiv) this. hiddendiv. style. visibility = "visible" var scrollerinstance = thisthis. tickerdiv. onmouseover = function () {scrollerinstance. mouseoverBol = 1} this. tickerdiv. onmouseout = function () {scrollerinstance. mouseoverBol = 0} setTimeout (function () {scrollerinstance. animateup ()}, this. delay)} // --------------------------------------------------------------------- // animateup ( )-Move the two inner divs of the scroller up and in sync // ----------------------------------------------------------------- pausescroller. prototype. animateup = function () {var scrollerinstance = thisif (parseInt (this. hiddendiv. style. top)> (this. visibledivtop + 5) {this. visiblediv. style. top = parseInt (this. visiblediv. style. top)-5 + "px" this. hiddendiv. style. top = parseInt (this. hiddendiv. style. top)-5 + "px" setTim Eout (function () {scrollerinstance. animateup ()}, 50)} else {this. getinline (this. hiddendiv, this. visiblediv) this. swapdivs () setTimeout (function () {scrollerinstance. setmessage ()}, this. delay) }}/// swapdivs ()-Swap between which is the visible and which is the hidden div //------------------------------------------------------------------ -Pausescroller. prototype. swapdivs = function () {var tempcontainer = this. visibledivthis. visiblediv = this. hiddendivthis. hiddendiv = tempcontainer} pausescroller. prototype. getinline = function (div1, div2) {div1.style. top = this. visibledivtop + "px" div2.style. top = Math. max (div1.parentNode. offsetHeight, div1.offsetHeight) + "px"} // ----------------------------------------------------------------- // setmessage ()-Popul Ate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller. prototype. setmessage = function () {var scrollerinstance = thisif (this. mouseoverBol = 1) // if mouse is currently over scoller, do nothing (pause it) setTimeout (function () {scrollerinstance. setmessage ()}, 100) else {var I = this. hiddendivpointervar ceiling = this. content . Lengththis. hiddendivpointer = (I + 1> ceiling-1 )? 0: I + 1this. hiddendiv. innerHTML = this. content [this. hiddendivpointer] this. animateup ()} pausescroller. getCSSpadding = function (tickerobj) {// get CSS padding value, if anyif (tickerobj. currentStyle) return tickerobj. currentStyle ["paddingTop"] else if (window. getComputedStyle) // if DOM2return window. getComputedStyle (tickerobj ,""). getPropertyValue ("padding-top") elsereturn 0}</script><script type="text/javascript">// New pausescroller (name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller (pausecontent, "pscroller1", "someclass", 3000) document. write ("<br />") New pausescroller (pausecontent2," pscroller2 "," someclass ", 2000)</script><!--************************************* 实例代码结束 *************************************--> </div> </td> </tr></table>
Tip: you can modify some code before running
