html
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="rollValue.js"></script>
<input type="text" value="0" />
<script type="text/javascript">
$("input").rollValue({minValue:0,maxValue:50,step:1});
</script>rollValue.js
;(function($) {
$.fn.rollValue = function(config) {
/**插件默认值**/
$.fn.rollValue.defaults = {
minValue: 0,
maxValue: 100,
step: 2,
};
var opt = $.extend({}, $.fn.rollValue.defaults, config);
return this.each(function() {
var _ele = $(this),
destination,
start = opt.minValue < 0 ? _ele.val() : opt.minValue;
_ele.val(start);
_ele.on("mousewheel DOMMouseScroll", function(e) {
var val = $(this).val() - 0;
if (e.type === "mousewheel") {
var p = e.originalEvent.wheelDelta / 120;
} else if (e.type === "DOMMouseScroll") {
var p = e.originalEvent.detail * (-1) / 3;
}
destination = val + opt.step * p;
if (destination < opt.minValue) {
return false;
} else if (destination > opt.maxValue) {
return false;
}
setTimeout(function() {
_ele.val(val + opt.step * p);
}, 50)
})
});
};
})(jQuery);