pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器,包括IE8+,支持移动设备。
HTML 代码结构示例:
1 2 3 4 5 6 | <div id= "pagepiling" > <div class= "section" >Some section</div> <div class= "section" >Some section</div> <div class= "section" >Some section</div> <div class= "section" >Some section</div> </div> |
参数配置示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(document).ready( function () { $( '#pagepiling' ).pagePiling({ menu: null , direction: 'vertical' , verticalCentered: true , sectionsColor: [], anchors: [], scrollingSpeed: 700, easing: 'swing' , loopBottom: false , loopTop: false , css3: true , navigation: { 'textColor' : '#000' , 'bulletsColor' : '#000' , 'position' : 'right' , 'tooltips' : [ 'section1' , 'section2' , 'section3' , 'section4' ] }, normalScrollElements: null , normalScrollElementTouchThreshold: 5, touchSensitivity: 5, keyboardScrolling: true , sectionSelector: '.section' , animateAnchor: false , //events onLeave: function (index, nextIndex, direction){}, afterLoad: function (anchorLink, index){}, afterRender: function (){}, }); }); |
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
2013-10-29 经典网页设计:20个与众不同的国外 HTML5 网站
2013-10-29 Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
2013-10-29 『摄影欣赏』25幅表达幸福情感的精美照片【组图】
2013-10-29 22套新鲜出炉的 Web & Mobile PSD 用户界面素材
2012-10-29 精美网站设计:25个以全屏照片为背景的网页作品
2012-10-29 【精心挑选】10款基于 jQuery 的图片360度旋转插件
2011-10-29 分享25个优秀的 HTML5 开发教程