Javascript seamless scrolling Knowledge Point
Currently, this label is not recommended because it does not comply with w3c standards (structure, style, behavior) functional separation.
1. behavior scrolling Mode
[Alternate]: Indicates rolling back and forth between the two ends
[Scroll]: indicates that the rolling from one end to the other will be repeated.
[Slide]: Indicates rolling from one end to the other end without repeating
2. The direction of the ction scroll is [down], [up], [left], and [right]
3. Number of loop scrolling times (when loop =-1 indicates that the loop is always playing, the default value is-1)
4. scrollamount: Set the rolling speed of active subtitles.
5. scrolldelay sets the latency between two active subtitle scrolling times.
Implemented using javascript
Html
- 1. Learn html5's absolute back-to-back attack (case study)
- 2. tab page switching effect (CASE)
- 3. Create a rounded crystal button (case study)
- 4. Basic HTML + CSS courses (series)
- 5. Page number creation (case study)
- 6. Create a navigation bar menu (case study)
Css
/* Intermediate style */# moocBox {height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden;/* must be added, the content that exceeds the limit must be hidden, so that you do not need to keep the content in the middle */}
Javascript
var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var speed = 50; area.scrollTop = 0; con1.innerHTML += con1.innerHTML; function scrollUp() { if (area.scrollTop >= con1.scrollHeight/2) { area.scrollTop = 0; } else { area.scrollTop++; } } var myScroll = setInterval("scrollUp()", speed); area.onmouseover = function () { clearInterval(myScroll); } area.onmouseout = function () { myScroll = setInterval("scrollUp()", speed); }