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

JavaScript012

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

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

touchmove

touchend

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

    <style type="text/Css">

body{background-color:#000000}

.window{position:absolutez-index:1overflow:hiddenwidth:300pxheight:100pxbackground-color:redleft: 0px}

.dragme{position:relativewidth:300pxheight: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>

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

<script>

window.addEventListener('scroll',function(){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

if(scrollTop>300){

//判断当滚到高度大于300时候

console.log('300')

//这里写要触发的事件

}

},true)

</script>