A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© AngularBaby 中级黑马   /  2017-12-19 15:54  /  2072 人查看  /  5 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 AngularBaby 于 2017-12-21 18:56 编辑

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

iScroll.gif

下载地址: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 黑马币  [记录]  [购买]

5 个回复

倒序浏览
6666666666666
回复 使用道具 举报
天王盖地虎!
回复 使用道具 举报
66666666666666,抱走
回复 使用道具 举报
宝塔镇河妖
回复 使用道具 举报
床前明月光~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马