<!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. Hibernate merge和update的区别

    今天做了个测试,写了个测试用例来看看merge与update时控制台打印出来的日志有什么不一样.实体bean很简单,就id和name两个字段,接下来分别给出以下几种测试情形的控制台日志内容: 1. 数 ...

  2. 吴裕雄 python神经网络 水果图片识别（2）

    import osimport numpy as npimport matplotlib.pyplot as pltfrom skimage import color,data,transform,i ...

  3. Centos7 配置ssh 免秘钥登陆

    1.yum install -y openssh 2.servier1: ssh-keygen -t rsa #有提示的直接enter 3.server 2: ssh-keygen -t rsa # ...

  4. input限制数字输入

    onkeyup="this.value=this.value.replace(/\D/g,'')"

  5. #define宏常量和const常量的区别

    C++ 语言可以用const 来定义常量,也可以用#define 来定义常量.但是前者比后者有更多的优点:(1) const 常量有数据类型,而宏常量没有数据类型.编译器可以对前者进行类型安全检查.而 ...

  6. django的数据库操作回顾

    补充一个filter中大于小于的用法 models.course_info.objects.filter(id__gte=30).delete() _exact 精确等于 like 'aaa' __i ...

  7. runloop与线程的关系

  8. [leetcode]318. Maximum Product of Word Lengths单词长度最大乘积

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  9. adf常用方法总结

    1.使用clientAttribute传值.获取值 或组件上面放客户端属性 <af:selectBooleanCheckbox text="" label="&qu ...

  10. Paxos Made Simple

    Paxos一致性算法——分布式系统中的经典算法,论文本身也有一段有趣的故事.一致性问题是分布式系统的根本问题之一,在论文中,作者一步步的加强最初一致性问题(2.1节提出的问题)的约束条件,最终导出了一 ...