|
为什么用 SlipJs? 简单易用 几句简单的代码就可以实现复杂完美的效果，加上详细的中文教程，这一切都使你能快速的使用SlipJs。 追求极致的高性能 SlipJs 的每一行代码都追求极致的高性能，并独创 完美 , 流畅 双核模式 很小 SlipJs 很小，仅仅只有12kb（无zip压缩）帮你节省珍贵的移动流量。 兼容Android iOS SlipJs 可以完美的运行在这最流行的两大平台上。 进入正题 如何使用SlipJs，很简单只要两步： 提示：具体如何使用SlipJs实现演示例子在线演示中的效果，请下载并参考演示例子的源码，下载地址：www.slipjs.com 第一步： 载入slip.js，你只需下载并在你的页面中载入slip.js； 第二步： 使用函数slip(mode, core, para)； 该函数有三个参数: 第一个参数：mode ，可以为"px"或者"page"。 为"px" 时将实现惯性滚动的效果（类似slipjs.com/dome中的第一个例子）， 为"page" 时将实现类似图片轮换的换屏效果（类似slipjs.com/dome中的第一个例子）。 例如： slip("px", core, para); // 或者 slip("page", core, para); 第二个参数：core ，这个参数传递的是运动的对象，例如： var core = document.getElementById("core"); slip('px', core, para); 第三个参数：para ，这个参数是一个对象子面量，该参数在px惯性滚动状态下和在page换屏状态下可传递的内容存在差别。 首先是这两种状态下均可传递的参数有： slip('px', core, { startFun: function, // 触摸开始时执行的函数 moveFun: function, // 触摸过程中执行的函数 touchEndFun: function, // 触摸结束时执行的函数 endFun: function // 滑动结束时执行的函数 }); page换屏状态下独有的参数： slip('page', core, { num: 3, // 屏数，例如轮换图片是图片的张数（必需） change_time: 3000, // 图片自动轮换的时间 lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文 firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文 no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文 loop: true // slipjs3.5.0开始支持，可以实现无限滑动下一张（最后一张时继续滑可以回到第一张） }); px惯性滚动状态下独有的参数： slip('px', core, { direction: 'x', // 设置滑动方向,"x"为横向滑动，默认为纵向滑动。 perfect: true, // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文 no_bar: true, // 是否启用模仿滚动条，true为不启用，默认启用 bar_no_hide: true, // 是否在滚动停止时隐藏滚动条，true为不隐藏，默认隐藏 core_width: 1000, // 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文 width: 400, // 滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文 bar_css: "background-color: rgba(8, 97, 149, 0.5);" // 自定义滚动条的样式 }); 现在你就可以预览效果了。 更详细的参数说明 看到这里如果你存在疑问那我猜可能会集中在几个参数的用法上，这些参数包括 page换屏状态下的 lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文 firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文 no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文 px惯性滚动状态下的 perfect: true, // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文 接下来我将一个个详细讲解 lastPageFun: function // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数。 //你想象一下：你现在是用px换屏模式来做一个图片放大并可滑动查看下一张的功能，这时你的用户滑动到了 最后一张还想继续查看下一张，你想提醒用户已经到最后一张了，那么这些提示的代码就可以放在这个函数中。 no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随。以图片轮换为例， 你可能发现现在互联网上的手机网站图片轮换功能基本可以分为两类，一类是你手指在上面滑动的时候图片会跟随你手指移动， 另一类是你手指在上面滑动时没有反应，只有你手指离开的时候吹滑动到下一张。通过这个参数你可以任选一种适合你的方式。 perfect: true // 是否启用完美模式，true为启用，何为完美模式。所谓完美模式是对应流畅模式而言的， 完美模式和流畅模式的区别表现在于滚动条的变化，完美模式下滚动条在滚动到底部或者顶部的时候大小会变化， 而流畅模式则没这个视觉效果。理论上流畅模式要比完美模式反应效率等各方面更快，其中的区别在表现上是滚 动条的区别，其实是实现形式的不同使得流畅模式的无法实现这一视觉效果。 |