This is a jquery based slider buy date selection plug-in, it looks like the Aliyun of the server purchase date selection interface. This jquery plugin is ideal for use on a number of virtual product purchase pages, which can help your users quickly choose a product's purchase date, which is very convenient. The effect chart is as follows:
Online preview Source Download
HTML code:
<center> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <ul class= "SLIDER-BG clearfix "> <li></li> <li></li> <li></li> <li></li> <LI&G
t;</li> <li></li> <li></li> <li></li> <li></li> <li> year </li> <li> year </li> <li> year </li> </ul> <!--interactive layer--> <div
class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> month </span></li> <li><span> months </span></li> <li><span> months </span></li> <li>& Lt;span> months </span></li> <li><span> months </span></li> <li><span> months & lt;/span></li> <li><span> months </span></li> <li><span> months </SPAN>&L T;/li> <li><span> </span></li> <li> year <span> year </span></li> <li> year <span>
Year </span></li> <li> year <span> year </span></li> </ul> <!--slider button-->
<a href= "javascript:;" class= "slider-bar-btn" ><i></i><i></i></a> </div> </div> <br/> <br/> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <u L class= "SLIDER-BG clearfix" > <li></li> <li></li> <li></li> <li&
gt;</li> <li></li> <li></li> <li></li> <li></li>
<li></li> <li> year </li> <li> year </li> <li> year </li> </ul> <!--interactive layer--> <div class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> months
</span></li> <li><span> months </span></li> <li><span> months </span></li> <li>& Lt;span> months </span></li> <li><span> months </span></li> <li><span> months & lt;/span></li> <li><span> months </span></li> <li><span> months </SPAN>&L
t;/li> <li><span> months </span></li> <li> year <span> year </span></li>
<li> year <span> year </span></li> <li> year <span> year </span></li> </ul> <!--slider button--> <a href= "javascript:;" class= "Slider-bar-btn" ><i></i><i></i></
a> </div> </div> <br/> <br/> <div class= "slider-date" id= "slider-date-" > <!--bottom--> <ul class= "SLIDER-BG clearfix" > <li></li> <li></li> <li> ;</li> <li></li> <li></li> <li></li> <li></li> <li></li> &L t;li></li> <li> year </li> <li> year </li> <li> year </li> </ul> ;! --Interactive layer--> <div class= "Slider-bar" > <ul class= "slider-bg clearfix" > <li><span> months </ span></li> <li><span> months </span></li> <li><span> months </span></l i> <li><span> months </span></li> <li><span> months </span></li> ;li><span> months </span></li> <li><span> months </span></li> <li><spa N> months </span></li> <li><span> months </span></li> <li> year <span> </sp An></li> <li> year <span> year </span></li> <li> year <span> </span></li&
Gt
</ul> <!--slider button--> <a href= "javascript:;" class= "Slider-bar-btn" ><i></i><i></i></ a> </div> </div> </center>
CSS code:
UL, Li {padding:;
margin:;
List-style-type:none;
}. clearfix:after {display:block;
Content: "";
Clear:both;
}. slider-date {height:px;
LINE-HEIGHT:PX;
Background: #eee;
Display:inline-block;
position:relative;
}. slider-date. slider-bg li {position:relative;
Float:left;
WIDTH:PX;
Border-left:solid px #ddd;
FONT-SIZE:PX;
Text-align:center;
}. Slider-date. slider-bg span {display:none;
}. slider-date. slider-bg Li:first-child {border-left:none;
}. slider-date. slider-bar {position:absolute;
Top:-px;
Left:;
Overflow:hidden;
HEIGHT:PX;
WIDTH:PX;
} slider-date. slider-bar ul {margin-top:px;
Background: #bfe;
Color: #fff;
HEIGHT:PX;
WIDTH:PX;
}. slider-date. slider-bar-btn {line-height:px;
Text-align:center;
Position:absolute;
Top:-px;
RIGHT:PX;
Display:block; Width: px;
HEIGHT:PX;
Background: #dacd;
Color: #fff;
}. slider-date. slider-bar-btn I {display:inline-block;
margin:px px;
WIDTH:PX;
HEIGHT:PX;
Background: #cde; }
JS Code:
Sliding plug-in By-mantou QQ:;
(function ($) {$.fn.sliderdate = function (setting) {var defaults = {callback:false//default callback function is false}
If setting is empty, take the value of default var setting = $.extend (defaults, setting);
This.each (function () {//Plug-in implementation code//var $sliderDate = $ (". Slider-date");
var $sliderDate = $ (this);
var $sliderBar = $sliderDate. Find (". Slider-bar");
var $sliderBtn = $sliderDate. Find (". slider-bar-btn"); var liwid = +; Width of single li//scrolling specified position var slidertodes = function (index) {//MAX cannot exceed if (Index >) {index =
;
}//min cannot be less than if (Index <) {index =;
}//Background animation $sliderBar. Animate ({"width": Liwid * (index +)},);
Execute callback if (setting.callback) {setting.callback (index);
}
};
Click-Scroll to the specified position $sliderDate. On (' Click ', ' Li ', function (e) {//Execute scrolling method Slidertodes ($ (this). index ());
}); Drag-Scroll toThe specified location $sliderBtn. On (' MouseDown ', function (e) {var $this = $ (this);
var pointx = e.pagex-$this. Parent (). width ();
var wid = null; Drag event $ (document). On (' MouseMove ', function (ev) {wid = Ev.pagex-pointx if (wid > && wid
<) {$sliderBar. css ("width", wid);
}). On (' MouseUp ', function (e) {$ (this). Off (' MouseMove MouseUp ');
var index = Math.ceil (Wid/liwid)-;
Slidertodes (index);
});
});
});
}) (JQuery);
$ (function () {function A (index) {console.log (index +);
} $ ("#slider-date-"). Sliderdate ({callback:a});
Function B (index) {console.log (index +);
} $ ("#slider-date-"). Sliderdate ({callback:b});
Function C (index) {console.log (index +);
} $ ("#slider-date-"). Sliderdate ({callback:c}); });
The above code is very simple, I hope you can enjoy.