PC 모바일 터미널은 IE 6.0+, FF 1.5+, Safari 2.0+, 오페라 9.0+ 관성 보조, 슬라이딩 리바운드와 호환됩니다.
외관 모드
코드 사본은 다음과 같습니다.
Window.onload = function () {
/*테스트 데이터*/
var insert = '';
for (var i = 0; i <80; i ++) {
insert + = '<div style = "width : 100%; 텍스트-정렬 : 센터;"> 슬라이딩 테스트' + i + '</div>';
}
document.getElementById ( "movearea"). innerhtml = 삽입;
/*테스트 데이터*/
var at = 새로운 apptouch ({
tcontain : 'Appare', // 필수 : 슬라이딩 영역 ID
tmove : 'movearea', // 필수 : 영역 ID 이동
tscroller : '스크롤러', // 필수 : 사용자 정의 스크롤 바
Tscrollerarea : 'scrollerarea'// 필수 : 스크롤 바 영역
}, OnMoveEnd);
// 상단/하단 콜백까지
기능 onMoveEnd (m) {
//console.log(m);
}
}
/*========================================================================= ===========================================================================
* 이름 : apptouch
* 기능 : 웹 앱 슬라이딩 시뮬레이션 구성 요소
* 매개 변수 : 관련 구성
============================*/
var apptouch = function (config, 콜백) {
this.touchcontain = config.tcontain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerarea = config.tscrollerarea;
this.callbackfn = 콜백;
this.move ();
}
apptouch.prototype = {
움직임 : 함수 (e) {
var monitor = document.getElementById (this.TouchContain), // Listergy Container
대상 = document.getElementById (this.touchmove), // 대상을 이동합니다
스크롤러 = document.getElementById (this.touchscroller), // 사용자 정의 스크롤 바
scrollerarea = document.getElementById (this.touchscrollerarea), // 스크롤러 영역
shight = monitor.offsetheight /target.offsetheight * monitor.offsetheight, // 스크롤 바의 길이를 사용자 정의합니다.
st = (target.offsetheight -monitor.offsetheight) /(Monitor.offSetheight -Sheight), // 롤러의 단위 길이에 해당하는 블록 이동 블록
tslow = 4, // 상단/하단 마이너스베이스까지
tmove = 0, // 슬라이더에서 최고 값입니다
tmovel = tmove + 140, // 드롭 다운 범위가 상단에 허용됩니다.
bmove = monitor.offsetheight -target.offsetheight, // 슬라이더의 최고 가치
bmovel = bmove -140, // 절대적으로 고갈 범위
callbackfn = this.callbackfn, // 콜백 함수
flg = false, // 마커가 미끄러 져 있는지 여부
스타일, // 시작 위치를 표시합니다
STARTTOP, // 슬라이딩 시작시 높이 값 표시
이동 = 0;
// 이동 거리
// 마우스 이벤트 등록
addevent (모니터, 'Mousedown', Movestart);
addevent (모니터, 'MouseMove', MoveIn);
addevent (모니터, '마우스 업', Moveend);
addevent (창, 'mousemove', movein);
addevent (창, '마우스 업', 움직임);
// 모바일 장치 터치 이벤트 등록
addevent (모니터, '터치 스타트', movestart);
addevent (모니터, '터치 모브', Movein);
addevent (모니터, '터치 엔', 움직임);
/**
*외관/전파 모드 포장
*/
/*이벤트 청취*/
함수 addevent (el, type, fn) {
if (el.addeventListener) {
el.addeventListener (유형, fn, false);
} else if (el.attachevent) {
el.attachevent ( 'on' + type, fn);
} 또 다른 {
el [ 'on' + type] = fn;
}
}
// 브라우저의 기본 동작을 취소합니다
함수 정지 (e) {
// 오페라/크롬/FF
if (e.preventDefault)
e.preventDefault ();
//즉
e.returnvalue = false;
}
// 포장이 끝납니다
/**
*작동 기능
*/
// 관성 완화 매개 변수
var lastmovetime = 0;
var lastmovestart = 0;
var stopinertiamove = false;
/*모바일 트리거*/
함수 movestart (e) {
정지 (e);
flg = true;
if (e.touches)
e = e.touches [0];
Starty = E.Clienty;
startTop = target.style.top || 0;
// 관성 천천히
lastmovestart = 스타디;
LastMovetime = new Date (). gettime ();
stopinertiamove = true;
scrollerarea.style.visibility = 'Visible';
}
/*움직임 중*/
기능 movein (e) {
if (flg) {
정지 (e);
if (e.touches)
e = e.touches [0];
Move = E.Clienty- Starty + Parseint (STARTTOP);
if (mak> tmove) {
(Move -Tmove) / tslow + tmove> tmovel? move = tmovel : move = (move -tmove) / tslow + tmove
} else if (이동 <bmove)
(Move -Bmove) / tslow + bmove <bmovel? move = bmovel : move = (move -bmove) / tslow + bmove;
target.style.top = move + 'px';
scroller.style.top = -move / st + 'px';
// 관성 천천히
var nowtime = new date (). gettime ();
stopinertiamove = true;
if (nowtime -lastmovetime> 300) {
LastmoveTime = nowtime;
lastmovestart = e.clienty;
}
}
}
/*이동 끝*/
함수 이동 (e) {
정지 (e);
if (e.touches)
e = e.touches [0];
// 관성 천천히
var contenttop = target.style.top.replace ( 'px', '');
var contenty = (parseint (contenttop) + e.clienty -lastmovestart);
var nowtime = new date (). gettime ();
var v = (e.clienty -lastmovestart) / (nowtime -lastmovetime);
// 마지막 시간에 손가락이 슬래시됩니다.
stopinertiamove = false;
(함수 (v, starttime, concenty) {
var dir = v> 0? -1 : 1;
// 가속 방향
var 결정 = dir * 0.005;
함수 inertiamove () {
if (stopinertiamove)
반품;
var nowtime = new date (). gettime ();
var t = nowtime -starttime;
var nowv = v + t * 감속;
var movey = (v + nowv)/ 2 * t;
// 속도 방향의 변화는 속도가 0에 도달했음을 의미합니다.
if (dir * nowv> 0) {
if (mak> tmove) {
Callbackfn ( 'top');
target.style.top = tmove + 'px';
scroller.style.top = tmove + 'px';
} else if (move <bmove) {
Callbackfn ( 'then it');
target.style.top = bmove + 'px';
scroller.style.top = -Bmove / st + 'px';
}
settimeout (function () {
if (! stopinertiamove)
scrollerarea.style.visibility = '숨겨진';
}, 4000);
반품;
}
move = contenty + movey;
if (mak> tmove) {
t /= 20;
mak = (move -tmove) / 10 + tmove;
} else if (move <bmove) {
t /= 20;
mak = (move -bmove) / 10 + bmove;
}
target.style.top = move + "px";
scroller.style.top = -move / st + 'px';
settimeout (Inertiamove, 10);
}
inertiamove ();
}) (v, nowtime, concenty);
이동 = 0;
flg = 거짓;
}
// 작동이 끝납니다
/**
*관련 초기화
*/
// 스크롤 막대 길이 초기화
scroller.style.height = sheight + 'px';
// 초기화가 끝납니다
},
기타 인터 랙트 : 함수 () {
// 다른 기능이 확장되었습니다
}
}
즉, 해킹 CSS
코드 사본은 다음과 같습니다.
Body, Html {배경색 :#333; 여백 : 0; 높이 : 100%; 라인 높이 : 2.0; Font-Family : 'Microsoft Yahei'; 오버플로 -Y : 숨겨진;}
#contain {마진 : 0 자동; 위치 : 상대; 너비 : 100%; 최대 width : 480px; _width : 480px; 높이 : 100%; 커서 : 포인터! 중요;}
#apparea {위치 : 절대; 너비 : 100%; 높이 : 100%; 오버플로 : 숨겨진; 배경색 : #fff;}
#TopInfo {위치 : 절대; 상단 : 60px; 너비 : 100%; 높이 : 60px; 텍스트 정렬 : 센터; 글꼴 크기 : 18px; }
#BottomInfo {위치 : 절대; 하단 : 0; 너비 : 100%;}
#scrollerarea {위치 : 절대; 오른쪽 : 0; 너비 : 1.5%; 높이 : 100%; 가시성 : 숨겨진;}
#scroller {위치 : 절대; 상단 : 0; 너비 : 100%; 배경색 : #aaa;}
#MoveArea {위치 : 절대; 상단 : 0px; 너비 : 100%; 배경색 : #ddd;}
HTML 코드
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 사용자-스케일 가능 = no">
<link type = "text/css"href = "css/main.css"rel = "스타일 시트">
<title> 슬라이딩 리바운드 </title>
<!-[LT IE 9 인 경우]> <! [endif]->
<noscript> </noscript>
</head>
<body>
<div id = "contonat">
<div id = "Apparea">
<div id = "topinfo">
로고 또는 애니메이션
</div>
<div id = "bottominfo">
일부 내성 2014-4-28
</div>
<div id = "movearea"> </div>
<div id = "scrollerarea">
<div id = "스크롤러"> </div>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>