基于jQuery滑动杆实现购买日期选择效果

这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。效果图如下：

在线预览源码下载

超文本标记语言代码：

中心div class=' slider-date ' id=' slider-date-'！-底层-ul=' slider-BG clear fix ' Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li年/li li年/li li年/li /ul！-互动层-div class=' slider-bar ' ul class=' slider-BG clear fix ' lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li li年跨度年/span/li li年跨度年/span/li li年跨度年/span/li /ul！-滑块按钮-a href=' JavaScript :''滑动条-BTN ' I/ii/I/a/div/div br/br/div class='滑动条-日期' id='滑动条-日期-'！-底层-ul=' slider-BG clear fix ' Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li年/li li年/li li年/li /ul！-互动层-div class=' slider-bar ' ul class=' slider-BG clear fix ' lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li li年跨度年/span/li li年跨度年/span/li li年跨度年/span/li /ul！-滑块按钮-a href=' JavaScript :'滑动条-BTN ' I/ii/I/a/div/div br/br/div class='滑动条-日期' id='滑动条-日期-'！-底层-ul=' slider-BG clear fix ' Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li年/li li年/li li年/li /ul！-互动层-div class=' slider-bar ' ul class=' slider-BG clear fix ' lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li lispan个月/span/li li年跨度年/span/li li年跨度年/span/li li年跨度年/span/li /ul！-滑块按钮-a href=' JavaScript :滑动条-BTN ' I/ii/I/a/div/div/中心CSS代码：

ul，li { padding:margin:列表样式类型：无；} .clearfix:after在{显示：块之后；内容： " "；clear:两者；} .滑块日期{高：像素线高：像素；背景技术# eeedidisplay :内联块；相对位置：} .滑块日期。滑块-bg li {相对位置：向左浮动：宽度：像素；左边框：实心px # DDD font-size : px；文本对齐：中心；} .滑块日期滑块-BG跨度{显示：无；} .滑块日期李：第一个孩子{边框-左侧：无；} .滑块日期。滑杆{位置：绝对值；top :-px；左侧：飞越：隐藏；高度：像素；宽度：像素；} .滑块日期。滚动条ul { margin-top : px；背景技术# bfecolor: # fff高度：像素；宽度：像素；} .滑块日期。滑杆-BTN {行高： px文本对齐：中心；绝对位置：top :-px；右：像素；显示器：块；宽度：像素；高度：像素；background : # dadcolor : # fff }。滑块日期。滑动条-BTN I {显示：内嵌块；余量：像素像素宽度：像素；高度：像素；背景# cde}js代码：

//滑动插件表示“次要的”馒头qq:(函数($) { $.fn.sliderDate=函数（设置){ var default={ callback : false//默认回调函数为false } //如果环境为空，就取系统默认值的值定义变量设置=$。扩展（默认，设置);this.each(function () { //插件实现代码//var $sliderDate=$(' .滑块-日期');var $ sliderDate=$(this)；var $sliderBar=$sliderDate.find ' .滑杆');var $sliderBtn=$sliderDate.find ' .滑动条-BTN '；var BlusH=；//单个里的宽度//滚动指定的位置var sliderToDes=函数（索引){ //最大不能超过if(index){ index=；} //最小不能小于if(index){ index=；} //背景动画$ sliderbar。animate({ ' width ' : BlusH *(index)}，)；//执行回调if(设置。回调){设置。回调(索引)；} };//点击-滚动到指定位置$sliderDate.on('单击'，' li '，函数(e) { //执行滚动方法sliderToDes($(this).index())；});//拖动-滚动到指定位置$sliderBtn.on('mousedown '，函数(e){ var $ this=$(this)；var pointX=e.pageX - $this.parent().宽度();var wid=null/拖动事件$(文档)。打开('鼠标移动'，函数(ev){ wid=ev。pagex-PointX if(wid wid){ $ slider bar。CSS(' width '，wid)；} }).on('mouseup '，函数(e) { $(这个).关闭(“鼠标向上移动鼠标”)；var指数=数学。ceil(wid/BlusH)-；sliderToDes(索引);});});});} })(jQuery)；$(function(){ function a(index){ console。log(index))；} $(“# slider-date-”).sliderDate({回调： a })；函数b(索引){控制台。日志(索引)；} $(“# slider-date-”).sliderDate({回调： b })；函数c(索引){控制台。日志(索引)；} $(“# slider-date-”).sliderDate({回调： c })；});以上代码很简单吧，希望大家能够喜欢。