核心提示：前端抛掷方法代码实现教程!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlemeta name=viewport con...
前端抛掷方法代码实现教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 100%;
height: 50px;
background-color: #eee;
overflow: hidden;
}
p ul{
list-style: none;
width: 2000px;
height: 50px;
}
p ul li{
float: left;
margin-right: 10px;
line-height:50px;
}
</style>
</head>
<body>
<p id="box">
<ul id="nav">
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
<li>栏目</li>
<li>栏目●</li>
</ul>
</p>
<script type="text/javascript">
var box = document.querySelector("#box");
var nav = document.querySelector("#nav");
var lastpoint,lastTowPointDistance;
var startX,dX;
var timer;
//信号量
var x = 0;
//触摸开始
box.addEventListener("touchstart",function(event){
//阻止默认事件
event.preventDefault();
//得到手指
var finger = event.touches[0];
//手指触摸开始的位置
startX = finger.clientX;
//停表
clearInterval(timer);
},true);
//触摸移动
box.addEventListener("touchmove", function(event){
//阻止默认事件
event.preventDefault();
//得到手指
var finger = event.touches[0];
//这一次和上一次的坐标差
lastTowPointDistance = finger.clientX - lastpoint;
lastpoint = finger.clientX;
//差值
dX = finger.clientX - startX;
//运动
nav.style.transform = "translate(" + (x + dX) + "px,0px)";
}, true);
//结束触摸
box.addEventListener("touchend", function(event){
//阻止默认事件
event.preventDefault();
var zongzhenshu = 50;
//信号量改变
x += dX;
//帧编号
var zhenbianhao = 0;
clearInterval(timer);
timer = setInterval(function(){
//定时器帮我们继续运动一些帧
zhenbianhao++;
if(zhenbianhao > zongzhenshu){
clearInterval(timer);
//验收x是不是负数，x不能是正数
if(x > 0){
x = 0;
nav.style.transition = "all 0.2s ease 0s";
nav.style.transform = "translate(0px,0px)";
}
}
//改变信号量
x += calcChange(zhenbianhao,zongzhenshu,lastTowPointDistance);
//运动
nav.style.transform = "translate(" + x + "px,0px)";
},20);
//计算这一帧的变化量
function calcChange(zhenbianhao,zongzhenshu,start){
return (start / (zongzhenshu * zongzhenshu)) * (zhenbianhao - zongzhenshu) * (zhenbianhao - zongzhenshu);
}
}, true);
</script>
</body>
</html>
