基于JQ的全屏滚屏插件,可加CSS3过场动画,可自定义动画

摘要
阿里云产品通用代金券,最高可达2000元
基于JQ的全屏滚屏插件,可加CSS3过场动画,可自定义动画,独立式插件,无冗余,放心使用。
基于animate.min.css的CSS3过场动画,使用灵活,分体式升级。

滚屏特效见到最多的就是推广页面(落地页),一屏一屏的给用户展示信息,避免了用户一直滑滚轮的操作,并且信息可以分类集中的展示给用户。
这个滚屏插件是基于JQ的,可以满足基本的需求,也可以配合《基于Jquery的页面滚动到相应位置运行css3过场动画,独立式插件,无冗余》这个插件使用。当然你也可以整合到自己系统上面,减少一点加载。

片展示:
111.png

插件使用:
$(dom).xswitch(object)
//object为json对象

参数说明:
object.section:滚屏的DOM,默认“.section”
object.page:分屏导航的类,方便自定义CSS,默认“.xs_nav”
object.active:分屏导航当前高亮的类名,默认“active”
object.easing:过场动画模式,遵循CSS3的transition,默认“ease”
object.duration:过场动画速度,单位毫秒,默认“500”
object.loop:是否循环滚屏,默认false
object.pagination:是否开启分屏导航,默认false
object.keyboard:是否开启按键控制,↑←为上一屏,↓→为下一屏,默认true
object.direction:vertical表示竖屏,其他表示横屏;默认“vertical”。如配合scrollAnim使用,请保持两个参数一致
object.callback:回调函数(方法),传参数是当前屏的索引(从0开始)
PS:请使用DIV包含住所有分屏的item,否则translate3d是导致分屏导航fixed失效

文件名称:基于JQ的全屏滚屏插件

文件大小:24.76 KB

更新日期:2019-11-15 15:29:41

作者信息:网络游客

授权类型:免费

目前评论:0 条

发表评论

游客 表情 看不清楚?点图切换