HTML에서 "UIScrollView"를 사용하는 웹 응용

"UIScrollView"xcode-function을 사용하지만 html로 웹 응용 프로그램을 만들고 싶습니다.HTML에서 "UIScrollView"를 사용하는 웹 응용

한 줄에 많은 이미지를 넣는 html 페이지를 만드는 데 아무런 문제가 없습니다. 다음 이미지를 표시하기 위해 스 와이프 제스처로 아이폰 수평 스크롤을 만들고 싶습니다.

만들 수 있습니까?

2011-06-14 user681061

당신이 명확하게 할 수 있습니까? 웹 앱 (html)을 만들고 있습니까? 또는 기본 (UIScrollView)? –

웹 앱 (html)을 만들고 싶습니다! UIScrollView 함수는 내가 어떻게 작동하게하는지에 대한 참조 일뿐입니다. – user681061

터치 시작 및 터치 (또는 터치 이동)가 방향을 파악한 다음 이미지를 다음/이전으로 바꿔야합니다. 여기에 몇 가지 링크가 있습니다 :

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

테스트되지 않은 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
var startX; 
var endX; 
var pic=0; 
var pics = ['pic1.png','pic2.png','pic3.png']; 
document.getElementById('picture').setAttribute('src',pics[pic]); 

function touchStart(event){ 
    startX = event.touches[0].pageX; 
} 

function touchEnd(event){ 
    endX = event.touches[0].pageX; 
    deltaX=endX-startX; 
    if(deltaX>0){ 
     next(); 
    } 
    else{ 
     prev(); 
    } 
} 

function next(){ 
    pic++; 
    if(pic>pics.length){pic--;} 
    document.getElementById('picture').setAttribute('src',pics[pic]); 
} 

function previous(){ 
    pic--; 
    if(pic<0){pic++;} 
    document.getElementById('picture').setAttribute('src',pics[pic]); 
} 
</script> 
<style> 
#pictureFrame{height:460px; width:320px; top:0; left:0;} 
</style> 

</head> 

<body> 
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div> 
</body> 
</html>

출처

2011-06-14 16:32:11

Big thanks Robot Woods !! – user681061

당신을 진심으로 환영합니다. 도움이 될만한 코드를 추가했지만 preventDefault (문서에 언급 됨) 또는 다른 디버깅을 추가해야 할 수도 있으므로 테스트하지 않았습니다. –

HTML에서 "UIScrollView"를 사용하는 웹 응용

답변

관련 문제