<!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. mongodb基础学习2-基本CRUD

    接着学习一下mongodb的基本的CRUD 先列出基本知识点,再给出相关的例子 增:语法: db.collectionName.insert(document); 1: 增加单篇文档,不指定_id时会 ...

  2. mysql 内存占用过多的解决方法

    以下是5.6默认的设置performance_schema_max_table_instances 12500table_definition_cache 1400table_open_cache 2 ...

  3. TEXT 6 Travelling with baggage

    TEXT 6 Travelling with baggage 背着行囊去旅行 Feb 16th 2006 From The Economist print edition (1)FEW modern ...

  4. js中常见的创建对象的方法

    前两天好好的把高程对象那一块又读了下,顺便写点笔记.补一句:代码都测试过了,应该没有问题的.可以直接拿到控制台跑! 1.工厂模式 function person(name, age, job) { v ...

  5. XtraBackup 备份原理

    来着淘宝技术: http://mysql.taobao.org/monthly/2016/03/07/ https://github.com/alibaba/AliSQL 前言 Percona Xtr ...

  6. Spark之 Spark Streaming整合kafka(Java实现版本)

    pom依赖 <properties> <scala.version>2.11.8</scala.version> <hadoop.version>2.7 ...

  7. 使用Fiddler发送POST请求

    使用Fiddler发送POST请求 在测试过程中,有时会遇到需要修改请求中带的参数,去验证权限的安全问题,但是一些post请求,我们在浏览器中不能直接修改他的参数,然后去提交验证. 而fiddler可 ...

  8. Python3 pow() 函数

    Python3 pow() 函数  Python3 数字 描述 pow() 方法返回 xy(x的y次方) 的值. 语法 以下是 math 模块 pow() 方法的语法: import math mat ...

  9. manacher最长回文序列c++

    算法真心读不懂 #include <iostream>#include<string>#include<cstring> using namespace std;c ...

  10. 【校招面试 之 C/C++】第27题 C++ 智能指针(三)之 unique_ptr

    auto_ptr<string> p1(new string ("auto") : //#1 auto_ptr<string> p2; //#2 p2 = ...