How to get the source code:
Friends who don't have members can directly privately chat with me "data scrolling" and I can package and send it to you separately (free!)
Case show:
Function Description:
The function of this case is automatic data scrolling, which can be used with the back-end for real-time visualization of data. Move the cursor to the screen to pause the scrolling, and move it away to continue scrolling.
In addition, this data visualization large-screen page can be used with the back-end code to add real-time visualization of data. If necessary, the td data information of the data table in this case can be replaced with the home page link of the user's personal information, so that the cursor You can view the user's homepage information after moving up and pause the scrolling. In addition, if the entire code is directly copied to the website pages of the big guys, there may be some unpredictable dislocations, because this case is set to center the screen.
Implementation code:
Implementation principle:
The implementation of this case is also very simple. Since it is a scrolling effect, the setInterval timer must be indispensable. Since the scrolling pauses when the cursor is placed on it and the scrolling continues when the cursor is removed, two timer settings are required. A timer, here we can encapsulate the timer into a function separately for convenience, and call this function in the timer. In addition, we also need to clear all the working timers after the mouse is moved up. This is In order to solve the problem of speed stacking, if it is not cleared, it will accelerate once every time you move up. The last point to note is: the name of the timer that the cursor is moved cannot use local variables, otherwise clearing the timer will fail.
<script>
document.addEventListener('DOMContentLoaded',function(event){
var inner=document.querySelector('.innerbg');
var screen=document.querySelector('.screen');
var mask=document.querySelector('.mask')
console.log(inner.offsetHeight);
var timer=window.setInterval(animate,12)
function animate(){
if(inner.offsetTop===-(inner.offsetHeight-screen.offsetHeight+10)){
inner.style.top=0+'px'
}else{
var l=inner.offsetTop;
l=l-1;
inner.style.top=l+'px'
}
}
mask.addEventListener('mouseover',function(){
window.clearInterval(timer)
})
mask.addEventListener('mouseout',function(){
timer=window.setInterval(animate,12)
})
})
</script>Layout code:
<div class="background">
<div class="border">
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<div class="rb"></div>
</div>
</div>
<div class="screen">
<div class="mask"></div>
<div class="innerbg">
<table cellspacing="0">
<tr>
<td>IP 196.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 110.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 106.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 186.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 161.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 116.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 145.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 126.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 196.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 161.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 116.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 145.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 126.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 196.168.123.134 以游客访问该网站</td>
</tr>
</table>
</div>
</div>Let me take you to review the relevant knowledge of timers:
setInterval(callback function, delay in milliseconds)
Remember that the callback function of this timer will be executed every time it passes, and the two functions are written in the same way as setTimeout.
<script>
window.setInterval(function(){
alert('时间到啦');
},4000)
</script>be careful:
- window can be omitted
- You can directly write the function or write the function name
- Time must be written in milliseconds
- There may be many timers in the page, it is better to set the glyph, var time1= window.setTimeout(fn,2000)
