이미지 이음매 없는 스크롤 코드(왼쪽/아래/위)_javascript 기술
- WBOY원래의
- 2016-05-16 17:37:391264검색
코드 복사 코드는 다음과 같습니다.
图片上无缝滚动
向上滚动
<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)}
-->
🎜>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.