一、概述
本实例特效代码是一款依赖于jq,iScroll滑动插件,效果偏向于手机移动端的,所以请用支持HTML5+CSS3主流浏览器预览效果,手机查看效果更佳哦。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)
样式不附加任何图片,能自动定位到当前系统日期。修复了以前在网络上下载下来了好几个BUG。大家如果喜欢可以去文章底部下载。
效果如下图所示:
二、使用说明
1、CSS样式:
<link rel="stylesheet" type="text/css" href="css/date.css">
2、JS插件代码:
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll_date.js" ></script>
3、完整使用方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>移动端日期选择插件特效-幸凡学习网</title>
<link rel="stylesheet" type="text/css" href="css/date.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/date.js?2153"></script>
<script type="text/javascript" src="js/iscroll_date.js"></script>
</head>
<body>
<!-- 日期容器 -->
<div id="datePlugin"></div>
<input type="text" id="dateinput" style="width:90%;height:50px;line-height:50px;display:block;margin:10px auto;font-size:16px;text-align:center;" />
<script>
$(function(){
//初始化日期插件
$('#dateinput').date();
});
</script>
</body>
</html>
三、结语
DEMO地址:http://www.86y.org/DEMO/mobliedate/
下载地址:http://pan.baidu.com/s/1mioCxT2 访问密码 4nvq
做前端最大的收藏不是你做了多少网站,而是你从中学了多少。所以把自己所学的东西能与大家分享,让大家一起共同进步这才是目的。
大家如果发现有什么问题可以反馈给我。
(完)
大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)