Webapp that uses "UIScrollView" in html
I would like to make a webapp that uses the "UIScrollView" xcode-function but in html.
There's no problem making a html page that puts a bunch of images in one row.. I just want to make a i开发者_如何转开发phone horizontal scroll with swipe gesture to show the next image.
Can this be made?
You'll need to watch for touchstart and touchend (or touchmove) to figure out the direction, then just replace the image with the next/previous. Here are some links:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Untested:
<!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>
加载中,请稍侯......
精彩评论