<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
</head>
<style type="text/css">
html,body{
100%;
height: 200%;
font-size: 12px;
margin:0;
padding: 0;
}
#oUl{
list-style: none;
margin:0;
padding:0;
}
#oUl li{
100%;
font-size: 1rem;
height:1.5rem;
text-align: center;
line-height: 1.5rem;
border:1px solid red;
}
.active{
background: red;
}
.activeall{
background:green;
}
</style>
<body>
<ul id="oUl">
<li name='1'>李四</li>
<li name='2'>张三</li>
<li name='3'>王五</li>
<li name='4'>张踢啊</li>
<li name='5'>李四</li>
<li name='6'>张三</li>
<li name='7'>王五</li>
<li name="8">张踢啊</li>
<li name='9'>王五</li>
<li name="10">张踢啊</li>
<li name='11'>李四</li>
<li name='12'>张三</li>
<li name='13'>王五</li>
<li name="14">张踢啊</li>
</ul>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var a = document.getElementById("oUl");
var b = 'li';
var url = "http://www.baidu.com";
function load (a,b,url){
var oul = a;
var le;
oul.addEventListener('touchstart',touch, false);
oul.addEventListener('touchmove',touch, false);
oul.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oli = oul.getElementsByTagName(b);
switch(event.type){
case "touchstart":
event.target.className = 'active';
var clX = event.changedTouches[0].clientX;
var clY = event.changedTouches[0].clientY;
le=clY;
break;
case "touchend":
window.location.href = url;
break;
case "touchmove":
event.preventDefault();
var clX = event.changedTouches[0].clientX;
var clY = event.changedTouches[0].clientY;
for(var j=0; j<oli.length; j++){
if(oli[j].className=="active"){
var clLL = oli[j].offsetLeft;
var clXX = clLL + oli[0].offsetWidth;
var clTT = oli[j].offsetTop;
var clYY = clTT + oli[0].offsetHeight;
if(clLL<clX && clXX>clX && clTT<clY && clYY>=clY){
if(le<clY){
if((j+1)<oli.length){
oli[j+1].className = '';
}
}else if(le>clY){
if((j-1)>=0){
oli[j-1].className = '';
}
}
}
}else{
var clLL = oli[j].offsetLeft;
var clXX = clLL + oli[0].offsetWidth;
var clTT = oli[j].offsetTop;
var clYY = clTT + oli[0].offsetHeight;
if(clLL<clX && clXX>clX && clTT<clY && clYY>= clY ){
console.log('1')
oli[j].className = 'active';
}
}
}
break;
}
}
}
window.addEventListener('load',load(a,b,url), false);
</script>
</html>