jquery 手机触发事件,用的是jqmobi。 需要按住一个div元素,向上滑 向下滑动,触发
jquery手机触发事件,用的是jqmobi。需要按住一个div元素,向上滑向下滑动,触发事件。怎么写...
jquery 手机触发事件,用的是jqmobi。
需要按住一个div元素,向上滑 向下滑动,触发事件。怎么写 展开
需要按住一个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>
这是个很简单的例子 细节需要自己优化下
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询