Cómo obtener el código fuente:
Los amigos que no tienen miembros pueden chatear directamente conmigo en privado "desplazamiento de datos" y puedo empaquetarlos y enviárselos por separado (¡gratis!)
Demostración del caso:
Función descriptiva:
La función de este caso es el desplazamiento automático de datos, que se puede utilizar con el back-end para la visualización de datos en tiempo real. Mueva el cursor a la pantalla para pausar el desplazamiento y aléjelo para continuar desplazándose.
Además, esta página de pantalla grande de visualización de datos se puede usar con el código de back-end para agregar visualización de datos en tiempo real.Si es necesario, la información de datos td de la tabla de datos en este caso se puede reemplazar con el enlace de la página de inicio de la información personal del usuario, de modo que el cursor Puede ver la información de la página de inicio del usuario después de subir y pausar el desplazamiento Además, si todo el código se copia directamente en las páginas del sitio web de los grandes, puede haber algunas dislocaciones impredecibles , porque este caso está configurado para centrar la pantalla.
Código de implementación:
Principio de implementación:
La implementación de este caso también es muy simple. Dado que es un efecto de desplazamiento, el temporizador setInterval debe ser indispensable. Dado que el desplazamiento se detiene cuando se coloca el cursor sobre él y continúa cuando se quita el cursor, se requieren dos configuraciones de temporizador. . Un temporizador, aquí podemos encapsular el temporizador en una función por separado para mayor comodidad, y llamar a esta función en el temporizador. Además, también necesitamos borrar todos los temporizadores de trabajo después de mover el mouse hacia arriba. Esto es para resolver el problema del apilamiento de velocidad, si no se soluciona, acelerará una vez cada vez que se mueva hacia arriba. El último punto a tener en cuenta es: el nombre del temporizador en el que se mueve el cursor no puede usar variables locales, de lo contrario, se producirá un error al borrar el temporizador.
<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>Código de diseño:
<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>Déjame llevarte a revisar el conocimiento relevante de los temporizadores:
setInterval (función de devolución de llamada, retraso en milisegundos)
Recuerde que la función de devolución de llamada de este temporizador se ejecutará cada vez que pase, y las dos funciones se escriben de la misma manera que setTimeout.
<script>
window.setInterval(function(){
alert('时间到啦');
},4000)
</script>ten cuidado:
- la ventana se puede omitir
- Puede escribir directamente la función o escribir el nombre de la función
- El tiempo debe escribirse en milisegundos.
- Puede haber muchos temporizadores en la página, es mejor configurar el glifo, var time1= window.setTimeout(fn,2000)
