黑马程序员技术交流社区

标题: 【广州前端】-【JQuery插件】- 平滑滚动的插件--iScroll 5 [打印本页]

作者: AngularBaby 时间: 2017-12-19 15:54
标题: 【广州前端】-【JQuery插件】- 平滑滚动的插件--iScroll 5
本帖最后由 AngularBaby 于 2017-12-21 18:56 编辑

iScroll是一种高性能、体积小、无依赖性、多平台的JavaScript滚动插件效果如下：

下载地址：https://github.com/cubiq/iscroll/archive/master.zip

其中包含几个版本的 js：
iscroll.js                它是通用脚本。
iscroll-lite.js          它是主脚本的精简版本。（使用移动设备。优点：体积小，速度快）
iscroll-probe.js    侦测当前的滚动位置。
iscroll-zoom.js       将缩放添加到标准滚动。
iscroll-infinite.js    可以做无限的和缓存的滚动。
一般使用 iscroll.js 即可
移动端无需兼容PC端可以使用 iscroll-lite.js

使用方法：下面以GIF动图demo为例：
纵向滑动：
1、基本结构：
HTML结构：

[HTML] 纯文本查看 复制代码

 

<div id="wrapper">

        <ul>

            <li>新闻</li>

            <li>图片</li>

            <li>财经</li>

            <li>视频</li>

            <li>体育</li>

            <li>健康</li>

            <li>娱乐</li>

            <li>时尚</li>

        </ul>

  </div>

CSS样式：

[CSS] 纯文本查看 复制代码



#wrapper {

            margin: 100px auto;

            width: 80px;

            height: 144px;

            overflow: hidden;

            background-color: #888;

            outline: 5px solid #888;

        }



        ul {

            width: 640px;

            margin: 0;

            padding: 0;

        }



        li {

            list-style: none;

            outline: 1px solid #888;

            text-align: center;

            width: 80px;

            line-height: 36px;

            background-color: #f0f0f0;

        }

2、引入JS文件：

[JavaScript] 纯文本查看 复制代码



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

3、初始化：

[JavaScript] 纯文本查看 复制代码



window.onload = function () {

            var myScroll = new IScroll('#wrapper');

        }

横向滑动：
1、基本结构：
HTML结构：

[HTML] 纯文本查看 复制代码

 

<div id="wrapper">

        <ul>

            <li>新闻</li>

            <li>图片</li>

            <li>财经</li>

            <li>视频</li>

            <li>体育</li>

            <li>健康</li>

            <li>娱乐</li>

            <li>时尚</li>

        </ul>

  </div>

CSS样式：

[CSS] 纯文本查看 复制代码



#wrapper {

            margin: 100px auto;

            width: 400px;

            height: 36px;

            overflow: hidden;

            background-color: #888;

            outline: 5px solid #888;

        }



        ul {

            width: 640px;

            margin: 0;

            padding: 0;

        }



        li {

            list-style: none;

            outline: 1px solid #888;

            text-align: center;

            width: 80px;

            line-height: 36px;

            background-color: #f0f0f0;

            float: left;

        }

2、引入JS文件：

[JavaScript] 纯文本查看 复制代码



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

3、初始化：横向滑动需要再初始化的时候添加参数 ‘scrollX: true’

[JavaScript] 纯文本查看 复制代码



window.onload = function () {

            var myScroll = new IScroll('#wrapper', {

                scrollX: true

            });

        }

更多API参数设置，需要参考插件官网
插件官网地址：http://iscrolljs.com/
附件是GIF图demo案例下载

点击查看更多精彩前端资源

iscroll-demo.zip

1.79 MB, 阅读权限: 10, 下载次数: 1

售价: 1 黑马币 [记录] [购买]

作者: dakk 时间: 2017-12-19 16:32
6666666666666

作者: 老哥哥 时间: 2017-12-19 16:33
天王盖地虎！

作者: 李盼盼老师 时间: 2017-12-19 16:33
66666666666666,抱走

作者: dakk 时间: 2017-12-19 16:34
宝塔镇河妖

作者: zjy耀 时间: 2018-3-26 22:25
床前明月光~

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2