JS는 Marquee를 대체하여 사진의 원활한 스크롤을 달성합니다
어쩌면 모두가 이것을 만났을 수도 있습니다. 그림이 Marquee로 스크롤 할 때 끝까지 스크롤되면 텍스트처럼 매끄럽게 스크롤하는 대신 시작점으로 돌아갑니다. 다음은 JS를 통해 사진의 원활한 스크롤을 실현하는 것입니다.
먼저 다음 속성을 이해해 봅시다.
innerhtml : 객체의 시작 및 엔드 태그에 HTML을 설정하거나 가져옵니다.
ScrollHeight : 물체의 스크롤 높이를 가져옵니다.
scrollleft : 객체의 왼쪽 경계와 창에서 현재 보이는 컨텐츠의 왼쪽 끝 사이의 거리를 설정하거나 얻습니다.
SCROLLTOP : 객체의 상단과 창에서 보이는 내용의 상단 사이의 거리를 설정하거나 얻습니다.
scrollwidth : 객체의 스크롤 너비를 가져옵니다
Offestheight : 부모 좌표 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 부모 좌표에 대한 객체의 높이를 가져옵니다.
OffsetLeft : 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 왼쪽 위치를 가져옵니다.
OffsetTop : 오프셋 탑 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 상단 위치를 가져옵니다.
OffsetWidth : 부모 좌표 오프셋 비교 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대한 객체의 너비를 가져옵니다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
사진은 매끄럽게 위쪽으로 스크롤합니다
<스타일 유형 = "text/css"> <!- #demo {배경 : #fff; 오버플로 : 숨겨진; 경계 : 1px 점선 #ccc; 높이 : 100px; 텍스트-앨리글 : 중심; float;} #demo img {테두리 : 3px solid #f2f2f2; display : </strys> 스크롤 < "DIMO"> id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </ href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </a> </div id = "demo2"> </div> </div> <cript> <!-var speed = 10; // 숫자가 클수록 속도 var 탭 = document.getElementByIdx_x ( "demo"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab2 = document.getElementByIdx_x ( "demo2"); tab2.innerhtml = tab1.innerhtml; // demo2Function marquee () {if (tab2.offsettop-tab.scrolltop <= 0) // demo1 및 demo2 tab.scrolltop- = tab1.offsetheight // demo가 다른 {scrolltop ++++++} var로 스크롤 할 때 클론 demo1 marquee () {if (if (tab2.off-tab.scrolltop <= 0) // mymar = setInterVal (Marquee, speed); tab.onmouseOver = function () {clearInterval (mymar)}; // // 마우스가 움직일 때 스크롤 탭의 목적을 달성하기 위해 타이머가 지워집니다.그림은 매끄럽게 아래로 스크롤합니다
<스타일 유형 = "text/css"> <!- #demo {배경 : #fff; 오버플로 : 숨겨진; 경계 : 1px 마시한 #ccc; 높이 : 100px; 텍스트-앨범 : 센터; float;} #demo img {테두리 : 3px solid #f2f2f2; display : </strys> </strest> 스크롤. id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </ href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </a> </div id = "demo2"> </div> </div> <cript> <!-var speed = 10; // 숫자가 클수록 속도 var 탭 = document.getElementByIdx_x ( "demo"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab2 = document.getElementByIdx_x ( "demo2"); tab2.innerhtml = tab1.innerhtml; // 복제 Demo1은 demo2tab.scrolltop = tab.scrollheightfunction marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // demo2 및 demo2 tab.scrolltop+= tab22.offsetheight // demo the the top {scrolltops-} {scrolltops remo} <scrolltops remo2} mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearinterval (mymar)}; // 마우스가 움직일 때 스크롤 탭을 스크롤하는 목적을 달성하기 위해 타이머를 지우십시오.그림은 왼쪽으로 매끄럽게 스크롤합니다
<스타일 유형 = "text/css"> <!-#demo {배경 : #fff; 오버플로 : 숨겨진; 경계 : 1px 대시 #ccc; width : 500px;}#demo img {테두리 : 3px solid#f2f2f2;}#indemo {float : width : 800%;}}}#}#}#}# 왼쪽;}-> </style> 왼쪽 <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/link/clear_logo.gif"/> </a> <a href = "<img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </a> </div id = "demo2"> </div> </div> <cript> <!-var speed = 10; // 숫자가 클수록 속도 var 탭 = document.getElementByIdx_x ( "demo"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab2 = document.getElementByIdx_x ( "demo2"); tab2.innerhtml; marquee () {if (tab2.offsetwidth-tab.scrollleft <= 0) tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft ++;}} var mymar = setInterval (marquee, speed); tab.onmouseOver = function () {tab.Mouse}; {mymar = setInterval (marquee, speed)};-> </script>그림은 오른쪽으로 매끄럽게 스크롤합니다
<스타일 유형 = "text/css"> <!-#demo {배경 : #fff; 오버플로 : 숨겨진; 경계 : 1px 대시 #ccc; width : 500px;}#demo img {테두리 : 3px solid#f2f2f2;}#indemo {float : width : 800%;}}}#}#}#}# 왼쪽;}-> </style> 오른쪽 스크롤 <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/link/clear_logo.gif"/> </a> <am href = "<img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </a> </div id = "demo2"> </div> </div> <cript> <!-var speed = 10; // 숫자가 클수록 속도 var 탭 = document.getElementByIdx_x ( "demo"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab1 = document.getElementByIdx_x ( "demo1"); var tab2 = document.getElementByIdx_x ( "demo2"); tab2.innerhtml; marquee () {if (tab.scrollleft <= 0) tab.scrollleft+= tab2.offsetwidthelse {tab.scrollleft-;}} var mymar = setInterval (marquee, speed); tab.onMouseOver = function () {clearInterval (mymar)}; {mymar = setInterval (marquee, speed)};-> </script>마지막으로, 누군가가 페이지에 두 개의 스크롤 사진 세트, 하나는 왼쪽에, 다른 하나는 오른쪽에 있으면 아래를 사용할 수 있습니다. 나는 모든 JS를 I와 CSS에 추가했습니다
오른쪽으로 스크롤하십시오
<div id = "demoi"> <div id = "indemoi"> <div id = "demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"#"> <img src ="// www.vevb.com/other/link/clear_logo.gif "/>> <a href ="> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </a> <div id = "demoi2"> </div> </div> <script> <!-var speedi = 10; // 숫자가 클수록 속도 var tabi = document.getElementByIdx_x ( "demoi"); var tabi1 = docum marqueei () {if (tabi.scrollleft <= 0) tabi.scrollleft+= tabi2.offsetwidthelse {tabi.scrollleft-;}} var mymari = setInterval (marqueei, speedi); tabi.onmouseOver = function () {tabi. {mymari = setInterval (marqueei, speedi)};-> </script>위의 간단한 예제는 사진의 중단되지 않은 연속 스크롤을 실현하는 JS의 간단한 예는 내가 당신과 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.