<!DOCTYPE html>

<html lange='en'>

<head>

    <meta charset='UTF-8'>

    <title></title>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

    <style>

        * {

        margin: 0;

        padding: 0;

    }

    #div1 {

        width: 670px;

        height: 250px;

        position: relative;

        margin: 50px;

        overflow: hidden;

        background: pink;

    }

    #ul1 {

        position: absolute;

        left: 0;

    }

    #ul1 li {

        width: 670px;

        height: 250px;

        float: left;

        list-style: none;

    }

     #ul1 li img{

     	 width: 670px;

     }

    </style>

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

<script type="text/javascript">

var oDiv = document.getElementById('div1');

var oUl = document.getElementById('ul1');

var aLi = oUl.getElementsByTagName('li');

var w = aLi[0].offsetWidth;

oUl.style.width = aLi.length * w + 'px';

var downLeft = 0;

var donwX = 0;

var iNow = 0;

var downTime = 0;

var bBtn;

oUl.ontouchstart = function(ev) {

	console.log(1)

    var touchs = ev.changedTouches[0];

    donwX = touchs.pageX;

    downLeft = this.offsetLeft;

    bBtn = true;

    downTime = Date.now();

}

// console.log(donwX)

oUl.ontouchmove = function(ev) {

    var touchs = ev.changedTouches[0];

    if (this.offsetLeft >= 0) {

        if (bBtn) {

            donwX = touchs.pageX;

            bBtn = false;

        }

        this.style.left = (touchs.pageX - donwX) / 3 + 'px';

        console.log(1)

    } else if (this.offsetLeft <= oDiv.offsetWidth - oUl.offsetWidth) {

    	console.log(oDiv.offsetWidth - oUl.offsetWidth)

        if (bBtn) {

            donwX = touchs.pageX;

            bBtn = false;

        }

        this.style.left = (touchs.pageX - donwX) / 3 + (oDiv.offsetWidth - oUl.offsetWidth) + 'px';

        console.log(2)

    } else {

        // debugger;

        this.style.left = touchs.pageX - donwX + downLeft + 'px';

        // console.log(touchs.pageX - donwX + downLeft+'this is')

        console.log(3)

    }

}

oUl.ontouchend = function(ev) {

    var touchs = ev.changedTouches[0];

    if (touchs.pageX < donwX) { //左

        if (iNow < aLi.length - 1) {

            // alert(Date.now() - downTime<300)

            if (donwX - touchs.pageX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && donwX - touchs.pageX > 30)) {

                iNow++;

            }

        }

        $('#ul1').animate({ 'left': -iNow * w });

    } else { //右

        // debugger;

        if (iNow > 0) {

            if (touchs.pageX - donwX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && touchs.pageX - donwX > 30)) {

                iNow--;

            }

        }

        $('#ul1').animate({ 'left': -iNow * w });

    }

}

</script>

<!--

1、用户划动超过图片的一半或者用户快速的滑过时才滚动一页

2、如果是在第1页，或者最后一页时移动的速度放慢3倍。

 -->

仿iPhone、iPad界面滑屏切换的更多相关文章

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

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

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

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

  3. ViewPager实现滑屏切换页面及动画效果（仿优酷客户端）

     找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考.这个是自己做的,仿优酷客户端的. 先看效果: ****************** ...

  4. Android ListView实现仿iPhone实现左滑删除按钮

    需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Override public boolean onTouchEvent(Moti ...

  5. JS禁止横竖屏切换,强制横竖屏显示

    js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  6. iOS － 滑屏方案

    参考自:iOS开发- 通过ChildViewCotroller ViewController容器 产品增加新的版面,类似于网易新闻,百度新闻,腾讯新闻等新闻客户端首页多屏幕滑屏切换,找了一些开源代码研 ...

  7. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  8. iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页

    ①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px ...

  9. iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸

    iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...

随机推荐

  1. linux c编程：gdb的使用

    首先用一个简单的打印字符的程序来做下示例 #include<stdio.h>#include<string.h>void main(){    int i=0;    char ...

  2. LeetCode 017 4Sum

    [题目] Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d  ...

  3. Redis3.x HA 方案（基于 Sentinel 方式）

    第一部分 Redis-HA 搭建 一.Redis-HA 拓扑 一主两从,主从复制,故障时主从切换 三个Redis节点 + Sentinel 节点 Master          127.0.0.1   ...

  4. java多线程系列 JUC锁01 框架

    转载 http://www.cnblogs.com/skywang12345/p/3496098.html 参考 https://www.cnblogs.com/leesf456/p/5453091. ...

  5. vue.use解析

    vue.use源码: Vue.use = function (plugin) { /*判断插件是否已引入*/ if (plugin.installed) { return } //倒序为一个数组[] ...

  6. 8--json交互

    8.1 为什么要进行json数据交互 json数据格式在接口调用.html页面中较常用,json格式较简单,解析较方便. 比如:webservice接口,传输json数据. 8.2      spri ...

  7. JAVA- 成员变量与局部变量的区别

    成员变量与局部变量的区别 成员变量是定义在方法之外,类之内的局部变量是定义在方法之内的. 作用上的区别: 1.成员变量的作用是用于描述一类事物的公共属性的. 2.局部变量的作用就是提供一个变量给方法内 ...

  8. BZOJ 1638 [Usaco2007 Mar]Cow Traffic 奶牛交通：记忆化搜索【图中边的经过次数】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1638 题意: 给你一个有向图,n个点,m条有向边. 对于所有从入度为0的点到n的路径,找出 ...

  9. 安装与设置hexo

    普通用户(非全局)安装nodejs和npm wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh nvm ins ...

  10. memcached高可用

    http://sourceforge.net/projects/repcached/ memcached-1.2.8-repcached-2.2.tar.gz tar zxvf memcached-1 ...