지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

이미지 이음매 없는 스크롤 코드(왼쪽/아래/위)_javascript 기술

WBOY
풀어 주다： 2016-05-16 17:37:39
원래의
1265명이 탐색했습니다.

가 루프에서 스크롤되지 않아 많은 대체 스크립트가 등장했거나 iframe 또는 JS 출력 가 다소 번거롭다는 점을 모두가 알고 계실 것입니다. 상대적으로 간단한 구현 아이디어에 대해 이야기해 보겠습니다. 너비를 설정하고 너비를 넘어서는 콘텐츠를 숨기고, 데모1과 데모2를 내부에 넣는 컨테이너 데모는 스크롤되는 콘텐츠이고, 데모2는 데모1의 직접 복제입니다. 데모1의 scrollTop 또는 scrollLeft는 데모1과 데모2의 교차점으로 스크롤할 때 바로 초기 위치로 점프하므로 점프하는 순간을 구별할 수 없으므로 목적을 달성합니다. "원활한" 스크롤.

원저자의 작업을 기반으로 주로 스타일을 수정하여 표를 레이블로 대체했습니다. 그리고 모든 브라우저에서 실행될 수 있도록 JavaScript를 표준화하세요.

먼저 개체의 여러 속성에 대해 알아 보겠습니다. innerHTML: 개체의 시작 및 끝 태그에 있는 HTML을 설정하거나 가져옵니다. scrollHeight: 개체의 스크롤 높이를 가져옵니다.

scrollLeft: 개체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다. scrollTop: 개체의 맨 위 가장자리와 보이는 맨 위 가장자리 사이의 거리를 설정하거나 가져옵니다. 창의 내용 scrollWidth : 개체의 스크롤 너비를 가져옵니다. offsetHeight: 레이아웃 또는 offsetParent 속성에 지정된 상위 좌표를 기준으로 개체의 높이를 가져옵니다. offsetLeft: 레이아웃 또는 개체를 기준으로 계산된 개체의 왼쪽 위치를 가져옵니다. offsetParent 속성으로 지정된 상위 좌표 offsetTop: 객체의 상대적 위치를 가져옵니다. offsetTop 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 상단 위치 offsetWidth: 지정된 레이아웃 또는 상위 좌표를 기준으로 객체의 너비를 가져옵니다. offsetParent 속성

코드 복사 코드는 다음과 같습니다.

图片上无缝滚动

向上滚动










<script> <br><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>function Marquee(){ <BR>if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <br></script>
图片下无缝滚动

向下滚动










<script> <br><!-- <BR>var speed=10; //숫자가 클수록 속도가 느려집니다. <BR>var tab=document.getElementById("demo"); <BR> var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; tab.scrollTop =tab.scrollHeight <BR>function Marquee(){ <BR>if(tab1.offsetTop-tab.scrollTop>=0)//demo1과 데모2의 교차점으로 스크롤하는 경우<br>tab.scrollTop =tab2 .offsetHeight // 데모가 맨 위로 이동 <br>else{ <br>tab.scrollTop-- <br>} <br>} <br>var MyMar=setInterval(Marquee,speed) <br>tab.onmouseover= function() {clearInterval(MyMar)};//마우스가 위로 움직일 때 타이머를 지워 스크롤을 중지합니다<br>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};// 마우스가 움직입니다<br></script>
왼쪽 그림 스크롤

왼쪽으로 스크롤












<script> <br><- <BR> var speed=10; number 속도가 느려집니다. <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1") <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>함수 Marquee(){ <BR>if(tab2.offsetWidth-tab.scrollLeft<=0) <BR>tab.scrollLeft-=tab1.offsetWidth <BR>else { <BR>tab.scrollLeft ; <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed) <BR>tab.onmouseover=function() {clearInterval(MyMar)}; .onmouseout =function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <br></script>
이미지 오른쪽 원활한 스크롤
🎜 >오른쪽으로 스크롤


="#">





;



<
var speed=10; //숫자가 클수록 속도가 느려집니다.
var tab=document.getElementById("demo")
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab .scrollLeft =tab2 .offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar )};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
-->
🎜>
관련 라벨：
원활한 스크롤
원천：php.cn
이전 기사：jquery를 기반으로 배경 왼쪽 메뉴를 클릭하면 display_jquery로 위아래로 슬라이드됩니다. 다음 기사：jquery_jquery를 기반으로 왼쪽 및 오른쪽 버튼을 클릭하여 이미지의 가로 스크롤을 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
React Three Fiber: 스크롤 이벤트가 지연되는 이유는 무엇입니까? ReactThreeFiber에는 카메라 줌 전체에 걸쳐 유지하려는 스프라이트를 생성하는 React 구성 요소가 있습니다. 알고리즘은 작동하는 것 같지만(시간이 지...
에서 2024-04-06 13:39:24
0
1
410
Live Server를 사용하는 웹 사이트를 파일에서 실행할 때 작동하지 않습니다. 여러 브라우저를 사용해 보았지만 모든 경우에 웹사이트가 LiveServer에서 잘 작동했습니다. 반면, Firefox/Chrome을 사용하여 실행하면 사이트에서 ...
에서 2024-04-06 12:46:18
0
1
403
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿