<!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. delphi 图片加水印源代码

    unit UWaterMark; interface uses {$IFNDEF DELPHIXE2ANDUP} windows,SysUtils,classes,graphics,Gdiplus; ...

  2. MIUI添加内存调试工具：查看进程中的Bitmap信息

    Android开发中的内存管理一直是令人头痛的事情.其中占用内存最大的一般是Bitmap.   在上周五发布的MIUI开发版中,我添加了查看内存里Bitmap信息的功能.大家开发app的时候可以使用这 ...

  3. 逻辑斯蒂回归VS决策树VS随机森林

    LR 与SVM 不同 1.logistic regression适合需要得到一个分类概率的场景,SVM则没有分类概率 2.LR其实同样可以使用kernel,但是LR没有support vector在计 ...

  4. etcd ui

    https://github.com/henszey/etcd-browser docker build --build-arg http_proxy=http://109.105.4.17:3128 ...

  5. 在java中使用ffmpeg将amr格式的语音转为mp3格式

    ffmpeg是一个非常强大的音视频处理工具,官网是:http://ffmpeg.org/. 由于ffmpeg在windows上和linux系统上的执行文件不一样(Windows上不需要安装ffmpeg ...

  6. 在ecplise中创建一个maven工程

    1.我们首先需要在Ecplise中配置maven环境,详情见我的博客:https://www.cnblogs.com/wyhluckdog/p/10277278.html 2.maven projec ...

  7. Struts2的拦截器技术

    1. 拦截器的概述 * 拦截器就是AOP(Aspect-Oriented Programming,面向切面)的一种实现.(AOP是指用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作 ...

  8. script标签的type="test/html"时

    们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法: 1 <script id="commentTemplate& ...

  9. Flask源码剖析详解

    1. 前言 本文将基于flask 0.1版本(git checkout 8605cc3)来分析flask的实现,试图理清flask中的一些概念,加深读者对flask的理解,提高对flask的认识.从而 ...

  10. POJ2585 Window Pains 拓扑排序

    Window Pains Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1843   Accepted: 919 Descr ...