<!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. LeetCode 237. 删除链表中的节点(Python3)

    题目: 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 -- head = [4,5,1,9],它可以表示为: 示例 1: 输入: head ...

  2. Johnson–Lindenstrauss 定理-Johnson–Lindenstrauss lemma

    Johnson–Lindenstrauss 定理是这样的:一个一百万维空间里的随便一万个点,一定可以几乎被装进一个几十维的子空间里! 严格说来是这样:在 M 维空间中的 N 个点,几乎总是被包含在一个 ...

  3. 2016.11.5初中部上午NOIP普及组比赛总结

    2016.10.29初中部上午NOIP普及组 这次比赛算是考的最差的一次之一了,当中有四分之三是DP. 进度: 比赛:没分+0+没分+40=40 改题:AC+0+没分+40=140 TurnOffLi ...

  4. pixi.js 学习

     事件(event):PIXI库在精灵和舞台上提供了事件,用于交互. stage.click = function(data){ var event = data.originalEvent } sp ...

  5. Mysql 1864 主从错误解决方法

    故障描述: 在mysql 主库上增加了一个主键操作,没过5分钟就接受到zabbix报警mysql主从同步异常停止信息,一首凉凉送给自己.... 查看现在主从状态 (root@192.168.1.2) ...

  6. JPA 中注解的作用

    JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.        JPA由EJB 3.0软件专家 ...

  7. 01-python 学习第一天

    今天是学习python语言的第一天,通过中国大学MOOC网的相关课程和其他在线教程,对python 语言有了初步的认识.今天我记住了<人生苦短,Python是岸>这句话.如果有人学习,建议 ...

  8. JS倒计时两种种实现方式 很不错

    最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...

  9. 网络爬虫技术Jsoup

    Jsoup介绍:Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容 Jsoup主要有以下功能: 1. 从一个URL,文件或字符串中解析HTML 2. 使用D ...

  10. API 练习 第一篇

    练习API   CreateSemaphoreCreateEvent ReleaseSemapWaitForSingleObject  CloseHandleInitializeCriticalSec ...