<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Title</title>

    <style>

        html,body{width: 100%;height: 100%;overflow:hidden}

        *{ margin: 0;padding: 0 }

        #main{width: 100%;height: 100%;position: relative;}

        #box{width: 700%;height: 100%;position: absolute;  top:0;left: 0;background: yellowgreen}

    </style>

</head>

<body>

<div id="main">

    <div id="box">

        <span>1111111111111111111111111111111111111111</span>

        <span>2222222222222222222222222222222222222222</span>

        <span>3333333333333333333333333333333333333</span>

        <span>44444444444444444444444444444444</span>

        <span>555555555555555555555555555</span>

        <span>666666666666666666666666</span>

        <span>6777777777777777777777777777777</span>

    </div>

</div>

</body>

<script src="iscroll.js"></script>

<script>

    var myScroll;

    function loaded() {

        myScroll = new iScroll('main',{

            bounce:false,//是否超过实际位置反弹

            momentum:true,//是否拖动惯性

            hScrollbar:false,//是否显示水平滚动条

        });

    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', loaded, false);

</script>

</html>

iscroll的滑动效果的更多相关文章

  1. iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法

    iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了. 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条 ...

  2. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  3. Android Scroll分析——滑动效果产生

    相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...

  4. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  6. Android实现多页左右滑动效果，支持子view动态创建和cache

    要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...

  7. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  8. 十六、Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  9. Android 滑动效果进阶篇（六）—— 倒影效果

    上篇介绍了使用Animation实现3D动画旋转翻页效果,现在介绍图片倒影实现,先看效果图 本示例主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1.倒影绘 ...

随机推荐

  1. JS数组 呼叫团里成员(使用数组元素) myarray[0]

    呼叫团里成员(使用数组元素) 我们知道数组中的每个值有一个索引号,从0开始,如下图, myarray变量存储6个人的成绩:   要得到一个数组元素的值,只需引用数组变量并提供一个索引,如: 第一个人的 ...

  2. html--图片背景兼容，兼容IE6

    在IE6中对图片格式png24支持度不高, 如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题, 但是使用png8代替png2 ...

  3. Eureka服务治理学习笔记(摘抄)

    1.简介 EureKa在Spring Cloud全家桶中担任着服务的注册与发现的落地实现.Netflix在设计EureKa时遵循着AP原则,它基于R EST的服务,用于定位服务,以实现云端中间层服务发 ...

  4. 「BZOJ2391」Cirno的忧郁

    传送门 设p[0] = (-10001,-10001) 把所有点按p[0]极角排序, s[i][j]表示三角形p[0]p[i]p[j]内的总价值,若i到j极角增大则s为正,否则s为负. 那么答案就是按 ...

  5. 菜鸟nginx源码剖析数据结构篇（四）红黑树ngx_rbtree_t[转]

    菜鸟nginx源码剖析数据结构篇(四)红黑树ngx_rbtree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...

  6. 对XP上的KiFastSystemCall进行浅析

    Windows API的系统调用过程通过KiFastSystemCall或int 2e进入内核,本文仅对XP上的KiFastSystemCall进行浅析. 以ntdll!ZwCreateProcess ...

  7. SPSS分析技术:多元方差分析

    SPSS分析技术:多元方差分析 下面要介绍多元方差分析的内容,多元方差分析是研究多个自变量与多个因变量相互关系的一种统计理论方法,又称多变量分析.多元方差分析实质上是单因变量方差分析(包括单因素和多因 ...

  8. Java超简明入门学习笔记（零）

    Java编程思想第4版学习笔记(零) 前言          这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要参考了C++11版本的C++语言,对比了它 ...

  9. elasticsearch river 从数据库中导入数据

    Elasticsearch中使用reiver-jdbc导入数据 2014-05-13 15:10 本站整理 浏览(3384)     Elasticsearch中使用reiver-jdbc导入数据,有 ...

  10. Spring Cloud各组件

    讲的不错:http://www.ityouknow.com/springcloud/2017/05/16/springcloud-hystrix.html Spring Cloud技术应用从场景上可以 ...