페이지의 특정 모듈에서 일부 메시지를 무한 루프로 스크롤해야 하는 경우가 있습니다. 그렇다면 js를 사용하여 원활한 스크롤을 달성한다면(예를 들어 모듈이 위쪽으로 스크롤되는 경우) 아이디어는 무엇일까요? 이 기사는 주로 CSS3를 사용하여 무한 루프 원활한 스크롤을 구현하는 예제 코드를 소개합니다. 관심 있는 친구들이 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.
A를 복제하고 원본 데이터 A 뒤에 동일한 데이터 B 복사본을 배치합니다.
setInterval을 사용하여 A의 상위 컨테이너를 위로 스크롤합니다.
위로 스크롤하는 거리 L이 정확하게 A (L==A.height()), L=0, 스크롤 다시 시작, 무한 루프.
A가 위쪽으로 움직일 때 뒤쪽에 데이터가 있어 유출된 공백을 메울 수 있도록 데이터 복사본을 복제하여 뒤쪽에 배치합니다. B가 가시 영역의 맨 위로 이동하고 A가 가시 영역 밖으로 이동하면 컨테이너는 0으로 재설정됩니다. 사용자는 이를 인식하지 못하고 여전히 B의 첫 번째 데이터라고 생각합니다. 그런 다음 계속 위로 스크롤하세요.
1. CSS3을 사용하여 구현
CSS3 속성을 사용하여 구현하려면 애니메이션이어야 합니다. 전환은 수동으로 실행해야 하고 무한히 실행할 수 없으며 애니메이션이 이 문제를 해결할 수 있기 때문입니다. .
데이터가 하드 코딩된 경우 데이터 복사본을 수동으로 복사하여 뒤에 넣은 다음 원본 데이터의 높이를 CSS에 쓸 수 있습니다. 구현 아이디어는 위와 동일합니다.
css:
@keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -307px, 0); transform: translate3d(0, -307px, 0); } } .list{ width: 300px; border: 1px solid #999; margin: 20px auto; position: relative; height: 200px; overflow: hidden; } .list .rowup{ -webkit-animation: 10s rowup linear infinite normal; animation: 10s rowup linear infinite normal; position: relative; }
html:
<p class="list"> <p class="cc rowup"> <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p> <p class="item">2- 3123233</p> <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p> <p class="item">4- ggrgerg</p> <p class="item">5- fvdgdv</p> <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</p> <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p> <p class="item">8- 德国网红致信默克尔</p> <p class="item">9- 国资委原</p> <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p> <p class="item">2- 3123233</p> <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p> <p class="item">4- ggrgerg</p> <p class="item">5- fvdgdv</p> <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</p> <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p> <p class="item">8- 德国网红致信默克尔</p> <p class="item">9- 国资委原</p> </p> </p>
실행 효과는 다음과 같습니다.
2. 데이터가 불확실할 때
위 섹션에서는 데이터가 죽고 높이가 증가합니다. 하드 코딩된 CSS3입니다. 하지만 인터페이스에서 얻은 데이터의 개수가 불확실하고, 각 데이터의 길이도 불확실하다면 어떻게 해야 할까요?
여기서는 데이터를 기반으로 높이를 다시 계산하여 CSS에 써야 합니다. 그러나 키프레임을 수정하는 것이 더 번거롭기 때문에 덮어쓰기를 사용하여 키프레임의 데이터를 다시 계산합니다.
// 设置keyframes属性 function addKeyFrames(y){ var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ @-webkit-keyframes rowup {\ 0% {\ -webkit-transform: translate3d(0, 0, 0);\ transform: translate3d(0, 0, 0);\ }\ 100% {\ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ }\ }\ @keyframes rowup {\ 0% {\ -webkit-transform: translate3d(0, 0, 0);\ transform: translate3d(0, 0, 0);\ }\ 100% {\ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ }\ }'; style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y); document.getElementsByTagName('head')[0].appendChild(style); }
원본 데이터 계산 A의 높이를 설정한 후 addKeyFrames 메소드를 실행하고 헤드에 CSS 속성을 추가합니다. 그러면 여기의 행은 이전 설정을 덮어씁니다. 각 스크롤의 거리는 데이터 A의 높이입니다.
function init(){ var data = '塞下秋来风景异,衡阳雁去无留意。四面边声连角起,千嶂里,长烟落日孤城闭。浊酒一杯家万里,燕然未勒归无计。羌管悠悠霜满地,人不寐,将军白发征夫泪。', //样例数据 data_len = data.length, len = parseInt(Math.random()*6)+6, // 数据的长度 html = '<p class="ss">'; for(var i=0; i<len; i++){ var start = parseInt( Math.random()*(data_len-20) ), s = parseInt( Math.random()*data_len ); html += '<p class="item"v>'+i+'- '+data.substr(start, s)+'</p>'; } html += '</p>'; document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据 var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度 addKeyFrames( '-'+height+'px' ); // 设置keyframes document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup } init();
3 . 가로 스크롤
위의 설명은 모두 위로 스크롤하는 것이므로 왼쪽, 오른쪽, 아래로 변환하는 값을 해당 값으로 변경하면 이해하기 쉽습니다.
4. 요약
CSS를 사용하여 애니메이션을 표시하면 페이지가 더 부드러워집니다. CSS로 구현할 수 있다면 최대한 CSS로 구현해 보세요
관련 권장 사항:
캐러셀의 원활한 스크롤 효과를 얻기 위한 javascript
JavaScript 원활한 스크롤의 예제 코드에 대한 자세한 설명 효과
javascript로 구현됨 왼쪽 및 오른쪽으로 원활한 스크롤 효과
위 내용은 무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!