<!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. argument python 参数 举例

    举例 例1:def multipute(x,y): x = 2 y[0] = ['spam'] return x,y X = 1 L = [1,2] X,L = multipute(X, L) pri ...

  2. MVC+Ext.net零基础学习记录（四）

    在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...

  3. pip 安装模块报错解决

    系统版本 ubuntu  Kylin 16.04 LTS 报错1:安装pip3 安装 Django 总是提示time out,无法安装. 改用国内源: 豆瓣源: sudo pip3 install - ...

  4. 2014暑假ACM训练总结

    2014暑假ACM训练总结报告 匆匆之中,一个暑假又过去了,在学校训练的这段日子真的是感觉日子过得好快啊! 时光如箭,日月如梭! 匆忙的学习之中一个暑假就这样结束了,现在就来写一些总结吧,供自己以后阅 ...

  5. iOS开发数据库-FMDB

    前言 FMDB是以OC的方式封装了SQLite的C语言API,使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码:对比苹果自带的Core Data框架,更加轻量级和灵活:提供了多线程安全的数据库操 ...

  6. URL过滤

    URL过滤 就是网址过滤.把不安全的.少儿不宜的.政治的东西过滤掉,访问这些网址就会提示受限,不能访问. 一.url过滤简介 针对企业对员工上网行为的控制管理,可以采用URL过滤技术.如企业不允许研发 ...

  7. densenet tensorflow 中文汉字手写识别

    densenet 中文汉字手写识别,代码如下: import tensorflow as tf import os import random import math import tensorflo ...

  8. JavaScript里值比较的方法

    JavaScript里值比较的方法 参考资料 一张图彻底搞懂JavaScript的==运算 toString()和valueof()方法的区别 Object.is 和 == 与 === 不同 == 运 ...

  9. L3-007 天梯地图（30 分）

    本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至少存在一条可达路线. 输 ...

  10. 白痴qwerta的胡言乱语（一句话日度感想？

    10.2 >我tm吹爆这个Latex插件!!!太漂亮了吧?!!! 10.3 >什么鬼气考试 还有这考试的大家也肽水了吧 >再吹一次这个Latex插件!!! 10.6 >今天在琢 ...