JavaScript는 좌우 control_javascript 기술로 원활한 스크롤을 구현합니다.

WBOY
풀어 주다: 2016-05-16 16:22:43
원래의
1356명이 탐색했습니다.

끊김 없는 스크롤링은 프로젝트에서 자주 사용되는 특수 효과입니다. 인터넷에 샘플 코드도 많이 있습니다. 여기서 공유하는 것은 호환성이 좋은 비교적 간단하고 실용적인 코드입니다. .

html 코드:

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

<html>
<head lang="ko">
<meta charset="UTF-8">
<title>끊김 없는 스크롤title>
<script src="js/0010.js">script>
<link rel="stylesheet" type="text/css" href="css/0010.css" />
헤드>
<본문>
<a href="javascript:">왼쪽으로 이동a>
<a href="javascript:">오른쪽으로 이동a>
<div id="div1">
> ~ ~ ~ ~ > div>
본문>
html>



CSS 코드


코드 복사

코드는 다음과 같습니다. *{ 여백:0; 패딩: 0; }
#div1{
오버플로: 숨김;
배경: 파란색;
위치: 친척;
너비: 600px;
높이: 150px;
여백: 100px 자동;
}
#div1 ul{
위치: 절대;
왼쪽: 0px;
상단: 0px;
목록 스타일: 없음;
}
#div1 ul li{
부동: 왼쪽;
}
#div1 ul li img{
너비:150px;
높이:150px;
}



js: 코드


코드 복사

코드는 다음과 같습니다.

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var 타이머=null;
var speed=2;//스크롤 속도 및 방향 제어
oUl.innerHTML=oUl.innerHTML oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';
타이머=setInterval(move,30);
oDiv.onmouseover=function(){//mouseover 임시
        clearInterval(타이머);
};
oDiv.onmouseout=function(){//마우스를 놓고 계속 스크롤
        타이머=setInterval(move,30);
}
Document.getElementsByTagName('a')[0].onclick=function(){
속도=-2;
}
Document.getElementsByTagName('a')[1].onclick=function(){
속도=2;
}
move() 함수{//그림 스크롤
If(oUl.offsetLeft<-oUl.offsetWidth/2){
              oUl.style.left=0;
}
If(oUl.offsetLeft>0){
              oUl.style.left=-oUl.offsetWidth/2 'px';
}
oUl.style.left=oUl.offset왼쪽 속도 'px';
}
}

효과가 대단하지 않나요?

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿