<!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. 【案例】鼠标按下，DIV跟随移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Java 怎样实现调用其他方法

    Java主类的main方法调用其他方法 方法1: funA()方法设为静态方法. 当主类加载到内存,funA()分配了入口地址,主要代码如下: public class test{ static vo ...

  3. 阿里云 Aliplayer高级功能介绍(四)：直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

  4. csps模拟69chess,array,70木板,打扫卫生题解

    题面:https://www.cnblogs.com/Juve/articles/11663898.html 69: 本以为T2傻逼题结果爆零了...T3原题虽然打的不是正解复杂度但是都不记得做过这道 ...

  5. Attribute类的使用

    为每个变量设置设置属性 "Description" public class PatternOption { /// <summary> /// 方向图步长 /// & ...

  6. RvmTranslator7.2

    1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...

  7. java基础之Math类

    Math类概述Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 成员方法 public static int abs(int a):绝对值 public static ...

  8. MySQL Server Logs

    日志记录存储方式 #日志记录存储方式 mysql> show variables like 'log_output'; mysql> set global log_output='FILE ...

  9. Lab 2 内存管理

    常见的操作系统 只使用了 0 和3 段选择子 DPL 是段描述符的内容 段的信息 中断和陷入的 大致特权级的展现 RPL 当前要访问数据段对饮给的特权级 CPL 当前代码段的特权级 DPL 全局的 通 ...

  10. C++嵌套类（内部类与外部类）

    在一个类中定义的类被称为嵌套类,定义嵌套类的类被称为外部类.; //不能访问 mytest::i = 10;//不能访问 } private: class mytest { int i; int j; ...