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

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

가 루프에서 스크롤되지 않아 많은 대체 스크립트가 등장했거나 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
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!