<!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. Android学习之——优化篇(2)

    一.高级优化     上篇主要从0基础优化的方式,本篇主要将从程序执行性能的角度出发,分析各种经常使用方案的不足.并给出对象池技术.基础数据类型替换法.屏蔽函数计算三种能够节省资源开销和处理器时间的优 ...

  2. 关于SAP S4 HANA 的13个问题

    SAP S/4HANA的路线图是怎样的?价格是多少?下一步还将添加哪些新模块?莫不闻专业SAP问答平台结合SAP HANA及SAP HANA应用商务套件开发全球负责人Uwe Grigoleit帮大家整 ...

  3. 在win7下使用git和gitlab进行code review

    1.安装 Git-2.6.3-64-bit.exe  下载地址:http://pan.baidu.com/s/1hqGvwnq 2.根据收到的邮件进入gitlab网站,并修改密码登陆 3.新建一个文件 ...

  4. margin的相关属性及应用

    1.margin常见问题: ①IE6下双边距   (不推荐使用float+margin,可用padding替代) 详见<css浏览器兼容问题集锦>之4.IE6中margin双边距 ②IE6 ...

  5. WPF区时浏览小程序

    在深圳已经工作了一个月了,之前做WinForm的,现在做WPF,每天加班到晚上10点,比之前累.学习新技术也是有个过程的,我就从基础的语法和 界面布局做起.这是我仿着做一个小软件. 效果图赏析 在原基 ...

  6. webpack不同devtools打包对比

    测试所用的配置文件: const path = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); co ...

  7. C# HttpRequest

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  8. BZOJ 1614 [Usaco2007 Jan]Telephone Lines架设电话线：spfa + 二分【路径中最大边长最小】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1614 题意: 给你一个无向图,n个点,m条边. 你需要找出一条从1到n的路径,使得这条路径 ...

  9. timing-function: steps()

    animation语法 animation:name duration timing-function delay iteration-count direction timing-function取 ...

  10. CSDN不登陆看博文

    做前端的朋友说,手动改太Low,给了段JS代码: javascript: void((function() {var divElement = document.getElementById('art ...