手把手教你写Js日期时间选择器(3)-让控件滑动起来
来源:互联网 发布:小升初辅导软件 编辑:程序博客网 时间:2024/05/18 15:56
本节为大家讲解怎么让控件滑动起来,这里需要用到一个第三方库IScroll.js.
先奉上链接地址:
IScroll github
IScroll 网站
IScroll介绍
IScroll是一个高性能,体积小,无依赖性,多平台的一个javascript滑动器.和Android里面的差不多.
IScroll不只有滑动功能,还有缩放,平移等功能,具体看文档撒.
IScroll的动画效果也有很多bounce, elastic, back…等等,以及自定义事件onbeforescrollstart,onscrollstart,onscroll,onscrollend….
艾玛.真难编,免(zi)得(ji)把(qu)大(kan)家(wen)误(dang)导(ba)了.
导入IScroll
在页面添加 <script src=”js/iscroll.js”></script>导入IScroll.
使用IScroll
IScroll的用法比较简单,具体可参考github上面的文档.
首先我们为要滑动的div添加一个id.
<div class="item" id="scroll-item"> <ul> <li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> </ul> </div>
创建一个IScroll,直接new.
var scroll = new IScroll("#scroll-item", { bounceEasing: "ease", bounceTime: 600 });
其中#scroll-item为要滑动div的id,bounceEasing为滑动效果,bounceTime为时间,可自行调整.
现在我们的控件就可以滑动了.
但是接下来在浏览器上面却发现卧槽,滑不动啊,是不是在逗我.
不要着急,现在我们滑动列表里面正好只有5个..5个..;5*40=200px;还没超出范围当然滑不动.让我们多复制几个列表项就可以了(WebStorm按住ctrl+d).
就像下面这样.
<li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li>
然后再去滑动,是不是就可以了呢.
好了现在我们的控件已经可以滑动起来啦.
但是有没有发现最后面两项和最前面两项是不是怎么拉都拉不出来?
淡定,淡定.
使出我们的终极大招:
<li></li> <li></li> <li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li></li> <li></li>
对,你没看错,就是在头和尾加上两个空的列表项,这样就可以选择到第一个和最后一个啦.
结语
好哒,让控件怎么滑动起来已经教给大家啦,相信不少有能力的小伙伴已经跃跃欲试想把控件封装起来哒,大家可以自行封装噢,反正原理已经知道啦,后面会再出怎么封装这个控件的文章.
欢迎大伙评论.
项目github链接
- 手把手教你写Js日期时间选择器(3)-让控件滑动起来
- 手把手教你写Js日期时间选择器(1)-基本结构
- 手把手教你写Js日期时间选择器(2)-样式实现
- JS日期时间选择器
- android让你的TabHost滑动起来
- android让你的TabHost滑动起来
- android让你的TabHost滑动起来
- android让你的TabHost滑动起来
- android让你的TabHost滑动起来
- android让你的TabHost滑动起来
- js日期时间选择器bootstrap
- android日期与时间滑动选择器
- 手把手教你Linux服务器集群部署.net网站 - 让MVC网站运行起来
- JS控件:日期、时间
- js日期时间控件
- js时间日期控件
- 手把手叫你写自定义ProgressDialog控件
- DateTimePicker控件(日期时间选择器)《笔记5》
- CodeForces 658A Bear and Reverse Radewoosh(模拟)
- qt5 多点触控
- centos下nginx仅允许指定域名访问,不可用ip访问
- HDU 4432 求因子+进制转换
- php自动匹配
- 手把手教你写Js日期时间选择器(3)-让控件滑动起来
- 使用nexus搭建Maven私服
- 51nod oj 1091 线段的重叠 【贪心】
- 可以动态修改时间的CountDownTimer
- ProgressDialog 进展对话框
- 一种基于monitor的系统软件架构
- 1240 莫比乌斯函数(数论)
- 如何解决缺失值
- 网页调试的那些事