<!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. X86/X64处理器体系结构及寻址模式

    由8086/8088.x86.Pentium发展到core系列短短40多年间,处理器的时钟频率差点儿已接近极限.尽管如此,自从86年Intel推出386至今除了添加一些有关流媒体的指令如mmx/sse ...

  2. linux c编程：网络编程

    在网络上,通信服务都是采用C/S机制,也就是客户端/服务器机制.流程可以参考下图: 服务器端工作流程: 使用socket()函数创建服务器端通信套接口 使用bind()函数将创建的套接口与服务器地址绑 ...

  3. Builder 模式初探

    Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细的控制对象的构造流程.该模式是为了将构建复杂对象的过程和它的部件解耦,使得构建过程和部件的 ...

  4. 请求时token过期自动刷新token

    1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...

  5. webpack热替换原理

    前期准备: const path = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); const C ...

  6. 部署asp.net网站的小问题

    C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG   web.config  修改 trust level="Full"

  7. Nginx中如何限制某个IP同一时间段的访问次数

    如何设置能限制某个IP某一时间段的访问次数是一个让人头疼的问题,特别面对恶意的ddos攻击的时候.其中CC攻击(Challenge Collapsar)是DDOS(分布式拒绝服务)的一种,也是一种常见 ...

  8. T56

    警方派人监视那个可疑人的住宅.The police put a watch on the suspect's house.他们利用自己的实践经验,设计了一台气冷柴油机.According their ...

  9. leetcode 169. Majority Element 多数投票算法(Boyer-Moore Majority Vote algorithm)

    题目: Given an array of size n, find the majority element. The majority element is the element that ap ...

  10. Win 10 无法打开内核设备“\\.\Global\vmx86”

    Win 10操作系统, VMWareWorkstation10 无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件.你想要在安装 VMware Workstation 前重启 ...