<!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. 窥探C语言程序的编译、链接与.h文件

    概述 C语言程序从源文件经过编译.链接生成可执行文件.那么编译与链接分别做了什么? 开发中为什么使用.h编写函数的声明?接下来使用案例说清楚为什么这样编写代码. C语言程序的编译和链接 C语言程序从源 ...

  2. 2019-8-31-dotnet-通过-WMI-获取系统启动的服务

    title author date CreateTime categories dotnet 通过 WMI 获取系统启动的服务 lindexi 2019-08-31 16:55:59 +0800 20 ...

  3. Python全栈开发：递归实例

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 递归不能无限,python会限制递归深度,递归主要用于费布拉切数列 &q ...

  4. vue倒计时：天时分秒

    data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...

  5. lync sdk 二次开发

    1.关于 UI Suppression Mode http://blog.thoughtstuff.co.uk/2014/08/the-6-things-you-need-to-know-about- ...

  6. [JZOJ6011] 【NOIP2019模拟1.25A组】天天爱跑步

    题目 描述 题目大意 给你平面直角坐标系上的nnn个起点和nnn个终点,(x,y)(x,y)(x,y)每次只能走到(x,y+x)(x+y,y)(x,y−x)(x−y,y)(x,y+x)(x+y,y)( ...

  7. Windows相关命令

    1.查看端口8080被哪个进程占用 netstat -ano | findstr "8080" 2.查看进程号为5768对应的进程 tasklist | findstr " ...

  8. VS2010版的Speex音频处理模块(附源码+测试demo)

    开源的Speex代码内部包含了VS2003,05,08工程,但是直接编译总有一些要设置的地方,虽说也不是很复杂,但是对于不是很了解VS的同学来说还是要折腾一阵,所以我弄了一个可以直接使用的版本,当然是 ...

  9. alias用于设置当前数据表的别名，

    alias用于设置当前数据表的别名,便于使用其他的连贯操作例如join方法等. 示例: $Model = M('User'); $Model->alias('a')->join('__DE ...

  10. 绕过CDN查找真实IP方法总结

    CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度等功能模 ...