作者Linux (Windows)
看板Soft_Job
标题[心情] jQuery ScrollView extend function
时间Mon Mar 14 17:39:23 2016
Hi all,
有段时间没发文了,分享一下今天写的小作品!
DEMO:
https://works.ioa.tw/OA-mobileScrollView/index.html
这是一个模拟手机水平 scroll view 的滑动效果,
是利用 jquery、jquery-ui、jquery.ui.touch-punch 实作!
主要依赖 jquery.js 与 jquery-ui.js 实作 scroll view,
再利用 jquery-ui 的 draggable 设定 axis: 'x' 完成水平拖曳移动,
但在手机的滑动 draggable 会失效,所以需要 jquery.ui.touch-punch.js 修正,
然後我再利用这些巨人大大的 lib 作出 这个 extend function!
特别注意,Demo 网站所有元素都用 box-sizing: border-box;
所以要改的话,要稍微注意,
版型 css 部分,是使用 scss 撰写,故此专案会有 scss、css 的资料夹。
有兴趣的话可以参考一下哟,也欢迎分享!
--
Live Demo:
https://works.ioa.tw/OA-mobileScrollView/index.html
GitHub:
https://github.com/comdan66/OA-mobileScrollView
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 211.23.19.91
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1457948370.A.BE9.html
1F:推 cloverhsc: 之前是用iscroll这套lib 03/14 17:43
2F:→ Linux: iscroll 可以水平 scroll @@? 我没试过,晚点来试试! 03/14 17:44
3F:推 Masakiad: 有分享就给推的概念 03/14 18:09
4F:推 neo5277: 推 第二张的大哥有点像雷洪.. 03/14 18:53
5F:推 fortinet: iScroll可以做到蛮复杂的模拟效果 03/14 19:57
6F:推 wixter: push 03/14 20:50
7F:推 yuanyu90221: 推 03/14 23:28
※ 编辑: Linux (114.43.91.221), 11/06/2016 20:10:58