html5 touch恶性事件完成触摸屏网页页面左右拖动

日期:2021-02-27 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

上篇文章内容应用html5的touch恶性事件把简易的拖动做出来了,完成了不断网页页面左右拖动的实际效果,参照以前的文章内容及编码html5 touch恶性事件完成触摸屏网页页面左右拖动(1)

本文关键完成了1个实际效果:网页页面拖动到最上面和最下面的情况下阻拦其再再次拖动;

由于给网页页面加上了touch恶性事件那末翻转条等别的网页页面原来的默认设置特性将别更改,上篇文章内容里的 demo能够1直向上拖动或向下拖动,但实际是这样是不能取的

详细编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
  6.     <title>2014⑸⑷</title>  
  7.     <style>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
  10.     #inner{width:80%;  background: #e4e4e4; margin: auto; position:relative; top:0px; font-size: 1em; padding: 30px 10px;  }   
  11.     #inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;}   
  12.     #spText{ height: 40px; width: 100%;border:1px solid red;}   
  13.     h2{ width: 100%; text-align: center; }   
  14.     h3{ width: 100%; padding-left:60%;}   
  15.     </style>  
  16.     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>  
  17. </head>  
  18. <body>  
  19.   
  20. <div id="spText"></div>  
  21. <div id="spText2"></div>  
  22.     <div id="outer">  
  23.         <div id="inner">  
  24.             <h2>背影</h2>  
  25.             <h3>—朱自清</h3>  
  26.                        <p>我与父亲不相见已2年余了,我最不可以忘掉的是他的背影。[1⑵]   
  27.         那年冬季,祖母死了,父亲的差使也交卸了,更是鸡飞蛋打的生活。我从北京到徐州,准备跟随父亲奔丧回家了。到徐州见着父亲,看见满院狼籍的物品,又想起祖母,禁不住簌簌地流下眼泪。父亲说:“事已这般,无须难过,好在办法总比问题多!”[1⑵]   
  28.         回家了变卖抵押,父亲还了亏空;又借款办了丧礼。这些生活,家里光景很是萧条,1半以便丧礼,1半以便父亲赋闲。丧礼结束,父亲要到南京找事,我也要回北京念书,大家便同行业。[1⑵]   
  29.         到南京时,有盆友约去瞎逛,勾留了1日;第2日上午便须渡江到浦口,中午上车北去。父亲由于事忙,本已说定不送我,叫宾馆里1个熟悉的茶房陪我同去。他再3叮嘱茶房,甚是细心。但他终究不安心,怕茶房不当之处帖;颇彷徨了1会。实际上我那年已210岁,北京已往来过两3次,是沒有甚么要紧的了。他彷徨了1会,终究决策還是自身送我去。我再3回劝他无须去;他只说:“没事儿,她们去不太好!”[1⑵]   
  30.         大家过了江,进了地铁站。我买票,他忙着照看行李。行李太多了,得向脚夫行些小费才可以往。他便又忙着和她们讲价格。我那时简直聪慧太过,总觉他讲话不大好看,非自身插嘴不能,但他终究讲定了价格;就送我上车。他给我拣定了靠车门的1张椅子;我将他给我做的紫毛大衣铺好坐位。他叮嘱我路上当心,夜里要警省些,不必受凉。又嘱托茶房好好呼应我。我内心窃笑他的迂;她们只认得钱,托她们只是白托!并且我这样大年龄的人,难道说还不可以美食自身么?[1⑵]   
  31.         我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不必走动。”我看那边月台的护栏外有几个卖物品的等着消费者。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是1个胖子,走以往当然要费事些。我原本要去的,他不愿,只好让他去。我看见他戴着黑布小帽,衣着黑布大马褂,深青布棉袍,趔趄地走到铁道边,渐渐地探身下去,尚不大难。但是他穿过铁道,要爬上那边月台,就不可易了。他用两手攀着上面,两脚再向上缩;他肥胖症的身子向左微倾,凸显勤奋的模样。这时候我看见他的背影,我的泪很快地流下来了。我赶快拭干了泪。怕他看见,也怕他人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地面上,自身渐渐地爬下,再抱起橘子走。到这边时,我赶快去搀他。他和我走到车上,将橘子1股脑儿放在我的皮大衣上。因而扑扑衣上的泥土,内心很轻轻松松似的。过1会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,转过头看见我,说:“进去吧,里面没人。”等他的背影混入来往来往的人里,再找不着了,我便进来坐下,我的眼泪又来了。[1⑵]   
  32.         近年来,父亲和我全是东奔西跑,家里光景是1日比不上1日。他少年外出维持生计,独力适用,做了很多大事。哪知老境却这般颓唐!他触目伤怀,当然情不可以自已。情郁于中,当然要发之于外;家中细枝末节便常常触他之怒。他待我逐渐不一样以往。但近期两年看不到,他终究遗忘我的不太好,只是惦念着我,惦念着我的儿子。[1⑵]   
  33.         我北来后,他写了1信给我,信中说道:“我人体安全,惟膀子痛疼强大,举箸提笔,众多麻烦,大概大去之期不远矣。”我读到此处,在晶莹剔透的泪光中,又看见那肥胖症的、青布棉袍黑布马褂的背影。唉!我不知道什么时候再能与他相见! </p>  
  34.         </div>  
  35.     </div>  
  36.   
  37.     <script>  
  38.         var startX,//触碰时的座标   
  39.             startY,   
  40.              x, //拖动的间距   
  41.              y,   
  42.              aboveY=0; // 设1个全局性自变量纪录上1次內部块拖动的部位   
  43.           var documentHeight=$("#inner").height();//內部拖动控制模块的高宽比   
  44.           var wapperHeight=$("#outer").height(); //外界架构的高宽比   
  45.              
  46.   
  47.          var inner=document.getElementById("inner");     
  48.   
  49.             function touchStart(e){//触碰刚开始   
  50.                 e.preventDefault();   
  51.                 var touch=e.touches[0];   
  52.                 startY = touch.pageY;   //刚触碰时的座标                          
  53.             }   
  54.   
  55.             function touchMove(e){//拖动   
  56.                  e.preventDefault();   
  57.                 var  touch = e.touches[0];                  
  58.                  y = touch.pageY - startY;//拖动的间距                                             
  59.                  inner.style.top=aboveY+y+"px";       
  60.                  document.getElementById("spText").innerHTML=inner.style.top;      
  61.                             
  62.                                   
  63.             }     
  64.   
  65.             function touchEnd(e){//手指离去显示屏                            
  66.                  aboveY=parseInt(inner.style.top);//touch完毕续篇录內部滑块拖动的部位 在全局性自变量中反映 1定要用parseInt()将其转换为整数金额字;   
  67.                   if(y>0&>0){//当拖动到最顶端情况下不可以再在网上拖动   
  68.                       //inner.style.top=0;   
  69.                        $("#inner").animate({top:0},200);   
  70.                        aboveY=0;   
  71.                     }    
  72.                      
  73.                   if(y<0&&(aboveY<(-(documentHeight-wapperHeight)))){//当拖动到最底部情况下不可以再网下拖动   
  74.                     // inner.style.top=-(documentHeight-wapperHeight)+"px";   
  75.                       $("#inner").animate({top:-(documentHeight-wapperHeight)},200);   
  76.                      aboveY=-(documentHeight-wapperHeight);   
  77.                   }    
  78.             }//   
  79.              document.getElementById("outer").addEventListener('touchstart', touchStart,false);     
  80.              document.getElementById("outer").addEventListener('touchmove', touchMove,false);     
  81.              document.getElementById("outer").addEventListener('touchend', touchEnd,false);     
  82.     </script>  
  83. </body>  
  84.   
  85. </html>  
     

   上面是demo的详细编码,这次应用的jquery,由于用到了animate 可让拖动到最上面和最下面有点延展性

   下面是demo实际效果,你还可以将编码copy用手机上浏览看看,编码较为简单只是完成了实际效果都还没考虑到到适配性和健硕性

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

原文:http://www.cnblogs.com/leinov/p/3707197.html

上一篇:HTML5标识小集 返回下一篇:没有了