소스 코드를 얻는 방법:
회원이 없는 친구들은 저와 직접 '데이터 스크롤링' 채팅을 할 수 있고 제가 따로 포장해서 보내드릴 수 있어요(무료!)
케이스 쇼:
기능 설명:
이 경우의 기능은 데이터의 실시간 시각화를 위해 백엔드와 함께 사용할 수 있는 자동 데이터 스크롤입니다. 스크롤을 일시 중지하려면 커서를 화면으로 이동하고 스크롤을 계속하려면 멀리 이동합니다.
또한 이 데이터 시각화 대형 화면 페이지는 백엔드 코드와 함께 사용하여 데이터의 실시간 시각화를 추가할 수 있습니다.필요한 경우 이 경우 데이터 테이블의 td 데이터 정보를 홈 페이지 링크로 대체할 수 있습니다. 사용자의 개인정보 중 커서가 위로 이동한 후 스크롤을 일시 중지하여 사용자의 홈페이지 정보를 볼 수 있도록 합니다. 또한 전체 코드를 대기업의 웹사이트 페이지에 직접 복사하는 경우 예측할 수 없는 일부 이탈이 있을 수 있습니다. , 이 경우는 화면 중앙에 설정되어 있기 때문입니다.
구현 코드:
구현 원칙:
이 경우의 구현도 매우 간단하다 스크롤 효과이기 때문에 setInterval 타이머는 필수 불가결한 것이다 커서를 그 위에 놓으면 스크롤이 일시 정지되고 커서가 제거되어도 스크롤이 계속되기 때문에 두 개의 타이머 설정이 필요하다 . 타이머, 여기서는 편의를 위해 별도로 타이머를 함수로 캡슐화하고 이 함수를 타이머에서 호출할 수 있습니다. 또한, 마우스를 위로 이동한 후 작동 중인 모든 타이머도 지워야 합니다. 이것이 해결하기 위한 것입니다. 스피드 스태킹의 문제, 클리어하지 않으면 위로 올라갈 때마다 한 번씩 가속됩니다. 마지막으로 주의할 점은 커서가 이동된 타이머의 이름은 지역 변수를 사용할 수 없다는 것입니다. 그렇지 않으면 타이머 지우기가 실패합니다.
<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>레이아웃 코드:
<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>타이머에 대한 관련 지식을 검토하도록 하겠습니다.
setInterval(콜백 함수, 밀리초 단위 지연)
이 타이머의 콜백 함수는 통과할 때마다 실행되며 두 함수는 setTimeout과 같은 방식으로 작성됩니다.
<script>
window.setInterval(function(){
alert('时间到啦');
},4000)
</script>조심해요:
- 창은 생략 가능
- 함수를 직접 쓰거나 함수 이름을 쓸 수 있습니다.
- 시간은 밀리초 단위로 작성해야 합니다.
- 페이지에 많은 타이머가 있을 수 있으므로 글리프를 설정하는 것이 좋습니다. var time1= window.setTimeout(fn,2000)
