<!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>

仿iPhone滑屏操作的更多相关文章

  1. Appium常用操作之「元素定位、swipe 滑屏操作」

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.打开 uiautomatorviewer 二.Appium 常用操作 1.用 layui 做 ...

  2. Appium + python - swipe滑屏操作实例

    方法一: from appium import webdriverfrom time import sleep descred_caps = { "platformName":&q ...

  3. Appium常用操作之「微信滑屏、触屏操作」

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.滑屏操作 1.访问之后,马上就滑屏可以吗? 2.连续实现 2 次滑屏 3.代码 二.模拟触屏 ...

  4. Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解

    前言:  虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...

  5. Scroller的应用--滑屏实现

    1.Scroller源代码分析 以下是对Scroller源代码的分析,并附有源代码.例如以下: package android.widget; import android.content.Conte ...

  6. Android中滑屏实现----触摸滑屏以及Scroller类详解 .

    转:http://blog.csdn.net/qinjuning/article/details/7419207 知识点一:  关于scrollTo()和scrollBy()以及偏移坐标的设置/取值问 ...

  7. 仿iphone动态萤火虫锁屏应用安卓源码

    该源码是仿iphone动态萤火虫锁屏应用源码,源码SkyLock,这也是最近弄了一款锁屏,苦于市场百般阻拦与锁屏应用数量实在太多,于是将它拿出来开源:废话不多说,希望大家能够希望,更多说明请看下面的吧 ...

  8. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  9. 一个仿windows泡泡屏保的实现

    一个仿windows泡泡屏保的实现 有天看到有人在百度知道上问windows 泡泡屏保该怎么用C#做,一时有趣,就做了一个出来,对于其中几个要点总结如下: 一,屏保程序的制作要求 屏保程序的扩展名是. ...

随机推荐

  1. ntohs, ntohl, htons,htonl的比较和详解【转】

    ntohs =net to host short int 16位 htons=host to net short int 16位 ntohs =net to host long int 32位 hto ...

  2. 批量部署ssh私钥认证

    vim  batch_sshkey.sh #!/bin/bashcd /rootcat /root/.ssh/id_rsa.pub > /root/.ssh/authorized_keysfor ...

  3. 树莓派Zero W添加音频输出

    编译:陈拓 chentuo@ms.xab.ac.cn 2018.06.07/2018.07.14 原文:Adding Basic Audio Ouput to Raspberry Pi Zero ht ...

  4. Containerpilot 配置文件模板

    { "consul": "{{ .CONSUL }}:8500", "logging": { "level": &quo ...

  5. t检验，T Test (Student’s T-Test)

    1.什么是T test? t-test:比较数据的均值,告诉你这两者之间是否相同,并给出这种不同的显著性(即是否是因为偶然导致的不同) The t test (also called Student’ ...

  6. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  7. Python3 tuple 函数

    Python3 tuple 函数  Python3 内置函数 描述 tuple 函数将列表转换为元组.. 语法 以下是 tuple 的语法: tuple( seq ) 参数 seq -- 要转换为元组 ...

  8. c++继承赋值兼容

    其实还是不明白,红色部分,,,求解 #include <iostream>#include <time.h>using namespace std; class B0{publ ...

  9. centos7下编译安装php-7.0.15(PHP-FPM)

    centos7下编译安装php-7.0.15(PHP-FPM) 一.下载php7源码包 http://php.net/downloads.php 如:php-7.0.15.tar.gz 二.安装所需依 ...

  10. PAT 1064 朋友数（20）（代码）

    1064 朋友数(20 分) 如果两个整数各位数字的和是一样的,则被称为是"朋友数",而那个公共的和就是它们的"朋友证号".例如 123 和 51 就是朋友数, ...