Webapp that uses "UIScrollView" in html_问答_开发者

开发者 https://www.devze.com 2023-03-12 14:27 出处：网络

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开发者_

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>