js移动端touch事件,html5左右滑动页面
上一篇文章用html5 touch事件做了一个简单的滑动，实现了页面连续上下滑动的效果。参考上一篇文章，编码html5触摸事件，实现触摸屏页面上下滑动(1)
本文主要实现了一个效果：当页面滑动到顶部和底部时，阻止其再滑动；
因为触摸事件被添加到页面，滚动条和其他页面的原始默认属性将不会被改变。上一篇文章中的演示总是可以向上或向下滑动，但现实是这是不可取的。
完整代码：
XML/HTML代码将内容复制到剪贴板！doctype html html lang= en head meta charset= UTF-8 metaname= viewport content= width=设备宽度，initial-scale=1 user-scalable=0 /title 2014-5-4/title style * { margin:0；填充：0；} #外部{宽度：90%；高度：490px背景：# 000；边距：自动；溢出：隐藏；} # inner {宽度：80%；背景：# e4e4e4边距：自动；位置：相对；top:0px；字体大小：1em填充：30 px X10 px；} # innerp { line-height:30px；字母间距：3px文本缩进：2em} # sp text { height:40px；宽度：100%；border:1 px solidred；} h2 {宽度：100%；文本对齐：居中；} h3 {宽度：100%；左填充：60%；}/style scripts RC= http://Ajax . Google APIs . com/Ajax/libs/jquery/1 . 8 . 2/jquery . min . js /script/head body Divid= sp text /Divid= sp text 2 /Divid= outer Divid= inner H2 back/H2 H3—朱自清/h3 p两年多没见父亲了，最忘不了的是他的背影。【1-2】那年冬天，外婆去世，父亲的差使卸了。那是祸不单行的一天。从北京到徐州，打算和爸爸一起回家。在徐州看到父亲，看到院子里乱七八糟的东西，想起奶奶，我忍不住流下了眼泪。父亲说：“事情已经这样了，不要难过，但是天无绝人之路啊！”【1-2】回家卖了质押物，父亲赔了亏；又借钱办丧事了。这几天家里情况很惨淡，一半是为了丧事，一半是为了父亲的清闲。葬礼结束后，父亲要去南京求教，我要回北京读书，我们一起去。【1-2】到了南京，一个朋友约好去拜访，住了一天；第二天早上必须过江到浦口，下午上车去北方。因为父亲比较忙，本已经决定不送我了，找了酒店里一个熟悉的服务员陪我。他一遍又一遍地告诉服务员，非常小心。但最后还是不放心，怕服务员不合适；犹豫了片刻。其实那年我二十岁，已经往返北京两三次了，也就无所谓了。他犹豫了一会儿，最后决定亲自带我去。我再三劝他不要去；他只说：“不要紧，他们走不好！”我们过了河，进了车站。我买票，他忙着看行李。行李太多了，所以你必须在到达之前给搬运工小费。他又忙着和他们讨价还价了。当时我很聪明，总觉得他说话不好听，非要打断我，但他最后还是谈妥了价格。带我去车里。他给我挑了一把车门边的椅子；我摊开他为我做的紫色外套的坐垫。他告诉我路上要小心，晚上要警惕，不要感冒。并让服务员好好照顾我。我心里嘲笑他的迂腐；他们只知道钱，只知道白拿工资！再说，我这个年纪的人都照顾不了自己？【1-2】我说：“爸爸，去吧。”他朝车外看了看，说：“我去买些橘子。你在这里，不要动。”我看到那边平台的围栏外有几个摊贩在等顾客。要去那边的站台，你得穿过铁路，跳下来，再爬上去。我爸爸是个胖子，走过去自然要费点劲。我要去，但他拒绝了，所以我只好让他去了。只见他戴着黑色的小布帽，穿着黑色的大布夹克，穿着深蓝色的棉袍，一瘸一拐地走到铁路边，慢慢俯下身子。这并不难。但是他要穿过铁路，爬上那边的站台，并不容易。他用双手爬上去，双脚又缩了起来；他肥胖的身体微微向左倾斜，显示出一种努力。看到他的背影，我的眼泪很快就流了下来。我赶紧擦干眼泪。他害怕看到，也害怕被别人看到。当我再往外看的时候，他已经抱着一个猩红色的橘子往回走了。过铁路的时候，他把橘子撒在地上，慢慢爬下来，然后捡起来。当我们到这里的时候，我会很快地帮助他。他陪我走到车旁，把所有的橘子都放在我的皮大衣上。于是我把脏东西扔在衣服上，感觉很轻松。过了一会儿，他说：“我走了。写在那边！”我看着他出去了。
他走了几步，回头看见我，说：“进去吧，里面没人。”当他的背影夹杂在来来往往的人群中，再也找不到他的时候，我进来坐下，眼泪又来了。【1-2】这几年我和父亲东奔西跑，家里情况越来越差。他外出谋生，自食其力，做了许多大事。哪知道旧世界如此颓废！他太难过了，自然控制不住自己。中间感觉压抑，自然要发出来；家庭琐事经常触动他的怒火。他对我不一样。但是最近两年没见他，他也终于忘记了我的过错，只想着我和我儿子。【1-2】我来到北方后，他给我写了一封信，说：“我身体很好，只是胳膊疼得厉害。筷子笔都不方便抬，就要走了。”读到这里的时候，在晶莹的泪光中，我看到了那个胖胖的背影，蓝布棉袍，黑布夹克。唉！不知道什么时候能再见到他！/p /div /div脚本varstartX，//触摸时坐标starty，x，//滑动距离y，above=0；//设置一个全局变量来记录最后一个内部块slide vardocumentheight=$( # inner )。height()；//内部滑动模块的高度varwapperheight=$ (# outer )。height()；//外框的高度var inner=document . getelementbyid( inner )；FunctiontouchStart(e){//Touch Start e . prevent default()；var touch=e . touches[0]；startY=touch.pageY//第一次触摸时的坐标} functiontouchMove(e){//slide e . prevent default()；var touch=e . touches[0]；y=touch . pagey-startY；//滑动距离inner . style . top=above y px ；document . getelementbyid( sp text )。innerHTML=inner . style . top；} function touched(e){//手指离开屏幕above y=parse int(inner . style . top)；//在//touch之后，记录内部滑块的滑动位置，这个位置体现在全局变量中。一定要用parseInt()转换成整数；If(y00){//滑到最上面就不能在线滑行了。//inner . style . top=0；$(#inner )。animate({top:0}，200)；above y=0；} if (y0 (above (-(文档高度-wapper height))){//滑动到底部时，不能离线滑动。//inner.style.top=-(文档高度-wapper高度) px ；$(#inner )。animate({ top:-(document height-wapperHeight)}，200)；above y=-(document height-wapperHeight)；} }//document . getelementbyid(“outer”)。addEventListener(touchstart ，touchstart，false)；document.getElementById(outer )。addEventListener(touchmove ，touchmove，false)；document.getElementById(outer )。addEventListener(touchend ，touchend，false)；/script /body /html以上是demo的完整代码。这一次使用jquery，因为animate可以使滑动到顶部和底部稍微灵活一些。
以下是演示效果，也可以用手机访问代码副本。代码比较简单，但是在不考虑兼容性和健壮性的情况下，已经达到了效果。
这就是本文的全部内容，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/leinov/p/3707197.html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。