jquery 手机触发事件,用的是jqmobi。 需要按住一个div元素,向上滑 向下滑动,触发

jquery手机触发事件,用的是jqmobi。需要按住一个div元素,向上滑向下滑动,触发事件。怎么写... jquery 手机触发事件,用的是jqmobi。
需要按住一个div元素,向上滑 向下滑动,触发事件。怎么写
展开
 我来答
匿名用户
推荐于2017-11-26
展开全部

这个能用原生写最好用原生的 xxx.addEventListener("touchstart",this,false)

touchmove

touchend

这3个过程来写,jqmobi是我见过最好的一个正对的web手机端的js框架。他可以使用zepto.js的一些插件 但是需要修改一些小地方就可以了。

    <style type="text/Css">
body{background-color:#000000;}
.window{position:absolute;z-index:1;overflow:hidden;width:300px;height:100px;background-color:red;left: 0px;}
.dragme{position:relative;width:300px;height:800px;} 
</style> 

//引入jqmobi
<script type="text/javascript"> 
var isdrag=false; 
var ty,y;
$(function(){
document.getElementById("moveid").addEventListener('touchend',function(){
sdrag = false;
});
document.getElementById("moveid").addEventListener('touchstart',selectmouse);
document.getElementById("moveid").addEventListener('touchmove',movemouse);
});
function movemouse(e){ 
  if (isdrag){ 
   var n = ty+ e.touches[0].pageY - y;
   $("#moveid").css("top",n);
   return false; 
   } 


function selectmouse(e){ 
   isdrag = true; 
   ty = parseInt(document.getElementById("moveid").style.top+0); 
   y = e.touches[0].pageY;  
   return false; 

</script> 
</head> 
<body> 
<div align="left" class="window">
<div id="moveid"  class="dragme">
<h1>这是一个可以通过触摸屏拖动的demo</h1>
<p>
向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动
</p>
</div>
</div>

这是个很简单的例子 细节需要自己优化下

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式