仿iPhone滑屏操作

时间:2024-01-05 14:36:44

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    #div1{width: 470px; height: 150px;position: relative;overflow: hidden;}
    #ul1{position: absolute;left: 0;}
    #ul1 li {width: 470px; height: 150px;float: left; list-style: none;}
    </style>
    <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oUI = document.getElementById('ul1');
    var aLi = oUI.getElementsByTagName('li');
    var w = aLi[0].offsetWidth;
    oUI.style.width = aLi.length * w + 'px';
//  ontouchstartr ontouchmove ontouchend  手指触发事件http://127.0.0.1:8020/huaping/img/1.jpg
//阻止默认事件
document.ontouchmove = function(ev) {
ev.preventDefault();
}
var downX = 0;
var downLeft = 0;
var iNow = 0;
var downTime = 0;
oUI.ontouchstart = function(ev){
//点下的瞬间获取指尖坐标
var touchs = ev.changedTouches[0];
downX = touchs.pageX;
downLeft = this.offsetLeft;
var btn = true;
//记录按下的时间  毫秒数
downTime = Date.now();
oUI.ontouchmove = function(ev){
var teouchs = ev.changedTouches[0];
if(this.offsetLeft >= 0) {
if(btn) {
btn = false;
downX = touchs.pageX;
}
this.style.left = (touchs.pageX - downX) / 3 + 'px';
} else if(this.offsetLeft <= oDiv.offsetWidth - oUI.offsetWidth) {
if(btn) {
btn = false;
downX = touchs.pageX;
}
this.style.left = (touchs.pageX - downX) / 3 + (oDiv.offsetWidth - oUI.offsetWidth) + 'px';
} else {
this.style.left = touchs.pageX - downX + downLeft + 'px';
}
}
oUI.ontouchend = function(ev){
var touchs = ev.changedTouches[0];
if(touchs.pageX < downX){   //←
if(iNow != aLi.length -1) {
//date.now - downTime < 300  时间差为300h
if(downX - touchs.pageX > aLi[0].offsetWidth/2 || (Date.now() - downTime < 300) && Date.now() - downTime > 20){
iNow++;
}
}
startMove(oUI, {left : - iNow * w}, 400, 'easeOut');
} else {   // →
if(iNow != 0) {
//date.now - downTime < 300  时间差为300h
if(touchs.pageX - downX > aLi[0].offsetWidth/2 || (Date.now() - downTime < 300) && touchs.pageX - downX > 20){
iNow--;
}
}
startMove(oUI, {left : - iNow * w}, 400, 'easeOut');
}
this.ontouchmove = null;
this.ontouchend = null;
}
}
    }
    </script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
</body>
</html>