<marquee> Knowledge pointsNow this label is not advocated for use because it does not conform to the functional separation of the standard (structure, style, behavior). 1.behavior scrolling way "alternate": means rolling back and forth "scroll" between the ends: means scrolling from one end to the other, repeating "slide": means scrolling from one end to the other, not repeating the direction of 2.direction scrolling "down", " up, ' left ', ' right ' 3.loop scrolling (when loop=-1 means scrolling chess, default Is-1) 4.scrollamount set the scrolling speed of the active caption 5.scrolldelay set the delay between two times of the active caption scrolling
1 <marquee loop="-1" onmouseover="this.stop (); " onmouseout="this.start (); "></marquee>
Implemented with JavaScript
Html
1<div id="Moocbox">2<ul id="Con1">3<li><a href="#">1. Learn HTML5 absolute cock Silk reverse attack (case) </a><span> -- the- -</span></li>4<li><a href="#">2. tab page Transition effect (case) </a><span> --Ten- the</span></li>5<li><a href="#">3. Fillet Crystal Button making (case) </a><span> --Ten- +</span></li>6<li><a href="#">4. HTML+CSS Basic Course (series) </a><span> -- one- on</span></li>7<li><a href="#">5Page numbering production (case) </a><span> -- one- .</span></li>8<li><a href="#">6. Navigation bar Menu Creation (case) </a><span> -- one- ,</span></li>9</ul>Ten</div>
Css
1 /* */2 #moocBox {3 height:144px; 4 width:335px; 5 margin-left:25px; 6 margin-top:10px; 7 overflow:hidden; /* */8 }
Javascript
1 varArea = document.getElementById ('Moocbox');2 varCon1 = document.getElementById ('Con1'); 3 varSpeed = -;4Area.scrolltop =0; 5Con1.innerhtml + =con1.innerhtml; 6 function Scrollup () {7 if(area.scrolltop >= con1.scrollheight/2) {8Area.scrolltop =0;9}Else {Tenarea.scrolltop++; one } a } - varMyscroll = SetInterval ("Scrollup ()", speed); -Area.onmouseover =function () { the clearinterval (myscroll); - } -Area.onmouseout =function () { -Myscroll = SetInterval ("Scrollup ()", speed); +}
JavaScript Seamless scrolling