试试以下代码：
<!DOCTYPE html><html>
<head>
<mata charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit","#pageone",function(){
$(document).on("scrollstop",function(){
alert("停止滚动！")
})
})
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>scrollstop 事件</h1>
</div>
<div data-role="content">
<p><b>提示：</b>如果未出现滚动条，请尝试调整窗口尺寸。</p>
<ul data-inset="true">
<li data-role="list-divider">信息列表</li>
<li data-role="fieldcontain">大学1</li>
<li data-role="fieldcontain">大学大学2</li>
<li data-role="fieldcontain">大学大学3</li>
<li data-role="fieldcontain">大学大学4</li>
<li data-role="fieldcontain">信息大学5</li>
<li data-role="fieldcontain">大学6</li>
<li data-role="fieldcontain">大学信息7</li>
<li data-role="fieldcontain">信息大学8</li>
<li data-role="fieldcontain">信息大学大学9</li>
<li data-role="fieldcontain">信息大学10</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
</ul>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
视图的改变都应该是因为数据的改变而引起的，而不是直接通过一些api去更改视图，像你这种对应的数据应该类似
[{
name: '开始'，
value: 1
},
{
name: '结束'，
value: 2
}
]
交换就是交换这个数据，然后根据新的数据去渲染你上面的视图，这样就不用担心数据和视图不同步了。
window.onload=function(){var btn=document.getElementById("btn")
var odiv=document.getElementById("div")
var ali=odiv.getElementsByTagName("li")
var w = document.documentElement.clientWidth
var y = document.documentElement.clientHeight
var directionX = []
var directionY = []
for(var i=0 i<ali.length i++){
directionX.push(true)
directionY.push(true)
}
var t=null
btn.onclick=function(){
clearInterval(t)
t=setInterval(function(){
for(var i=0 i<ali.length i++){
var speedx=Math.floor(Math.random()*50 + 5)
var speedy=Math.floor(Math.random()*18 + 8)
var l = directionX[i] ? ali[i].offsetLeft+speedx : ali[i].offsetLeft-speedx
var t = directionY[i] ? ali[i].offsetTop+speedy : ali[i].offsetTop-speedy
if(0 < l && l <= w-ali[i].offsetWidth){
ali[i].style.left=l+"px"
}
else
directionX[i] = !directionX[i]
if(0 < t && t < y-ali[i].offsetHeight){
ali[i].style.top=t+"px"
}
else
directionY[i] = !directionY[i]
}
},10)
}
}
