이 기사에서는 JS+HTML5 휴대 전화 개발을위한 스크롤 및 관성 완화 구현 방법에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
1. 다음 세 가지 구현 방법을 스크롤하십시오.
1) 기본 CSS 속성 오버플로 사용 : 스크롤 div id = 부모 스타일 = 오버플로 : 스크롤; Divid = 'Content'컨텐츠 영역 /div /div 통지 : Android에는 버그가 있으며 스크롤 후에는 최상위 컨텐츠 영역으로 돌아갑니다. 해결책은 후자의 두 가지 방법을 사용하여 구현하는 것입니다.
2) JS 프로그래밍 구현 아이디어 : 화면의 손가락 앞뒤 뒷면의 위치 변경을 비교하여 콘텐츠 요소 컨텐츠를 변경합니다.
1. 스크롤
다음은 세 가지 구현 방법입니다.
1) 기본 CSS 속성 오버플로 : 스크롤을 사용하십시오
<div id = "parent"style = "오버플로 : 스크롤;> <div id = 'content'> 컨텐츠 영역 </div> </div>
알아채다:
Android에는 버그가 있으며 스크롤 후에는 최상위 콘텐츠 영역으로 떨어집니다. 해결책은 후자의 두 가지 방법을 사용하여 구현하는 것입니다.
2) JS 프로그래밍 구현
아이디어 : 화면에서 손가락이 움직이기 전후에 내용 요소의 위치를 비교하십시오.
1 단계 : 부모의 오버플로를 숨겨진 상태로 설정하고 콘텐츠의 위치를 상대적으로, 상단으로 0으로 설정하십시오.
2 단계 : 터치 이벤트를 듣습니다
var parent = document.getElementById ( 'parent'); parent.addeventListener ( 't touchend}); parent.adeventListener ( 'touchend', function (e) {// touchend});3 단계 : 스크롤 코드를 구현합니다
/*** 여기에서 수직 스크롤 만 구현됩니다*/var parent = document.getElementById ( 'parent'); var content = document.getElementById ( 'content') var starty = 0; // 초기 위치 var lasty = 0; // 마지막 위치 parent.adeventListener ( 't '); / / 컨텐츠 컨텐츠를 이동시키기위한 최상위 값을 설정합니다. Style.top = (parseint (contenttop) + movey) +'nowy;}); parent.addeventListener ( 't content.style.top.replace ( 'px', '');
4 단계 : 최적화
위의 코드는 휴대폰에서 실행되며 많은 결과가 있습니다.
최적화는 다음을 참조하십시오.
3) iscroll4 프레임 워크를 사용하십시오
var scroll = new iscroll ( '부모', {hscrollbar : false, vscrollbar : true, checkdomchanges : true});프레임 워크 공식 웹 사이트 : http://cubiq.org/iscroll-4
2. 관성 완화
아이디어 : 마지막 기간 동안 화면에서 스 와이프하는 손가락의 평균 속도 V를 사용하고 이동할 수 없거나 V <= 0까지 감소하는 기능에 따라 V를 변경하십시오.
/*** 여기에서 수직 스크롤 만 구현됩니다*/var parent = document.getElementById ( 'parent'); var content = document.getElementById ( 'content') var starty = 0; // 초기 위치 var lasty = 0; // 마지막 위치/*** 완화를위한 변수*/var lastmoveTime = 0; var lastmovestart = 0; var stopinertiamove = false; // parent.adeventListener ( 't vary = var movey = var contment.top.replace ( 'px', ''); 날짜 (); StopInertiamove = true; contment.top.replace ( 'px', ''); 마지막 시간); // 마지막 시간 핑거 스트로크 속도 stopinertiamove = false (v, starttime, contenty) {var dir = v> 0? -1 : 1; // var duration = v /emfeleration; // 0으로 필요한 시간을 감소시킵니다. if (stopinertiamove) var. settimeout (inertiamove, 10);추신 : 다음은 몇 가지 코드 형식 및 미화 도구입니다. 나는 당신이 향후 개발 과정에서 그것들을 사용할 것이라고 생각합니다.
온라인 자바 스크립트 코드 미화 및 서식 도구 :
http://tools.vevb.com/code/js
JavaScript 압축/서식/암호화 도구 :
http://tools.vevb.com/code/jscompress
JSON 코드 온라인 서식/미화/압축/편집/변환 도구 :
http://tools.vevb.com/code/jsoncodeformat
온라인 JSON 코드 검증, 검사, 미화 및 서식 도구 :
http://tools.vevb.com/code/json
jQuery에 대한 자세한 내용은이 사이트의 특별한 주제를 방문하십시오. "일반 플러그인 및 jQuery 사용 요약", "jQuery의 Ajax 사용 요약", "jQuery 테이블 요약 (테이블) 운영 기술 요약", "JQuery Drag and Drop Effects and Drop Effects and Techniques의 요약", JQuery Special Effection의 요약 ", JQuery Special Effection의 요약" 효과 사용 "및"jQuery 선택기 사용법 요약 "
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이되기를 바랍니다.