/** * jquery.spin.js * 效果请下载附件查看 **/ (function($){ $.fn.extend({ spin: function(opt){ return this.each(function(){ opt = $.extend({ spinBtnImage: 'spin-button.png',//图片名称 spinUpImage: 'spin-up.png',//点击增加显示的图片 spinDownImage: 'spin-down.png',//点击减少显示的图片 interval: 1,间隔值 max: null, //最大值 min: null, //最小值 timeInterval: 500,选中多少毫秒执行一次 timeBlink: 200 }, opt || {}); var txt = $(this); var spinBtnImage = opt.imageBasePath+opt.spinBtnImage; var btnSpin = new Image(); btnSpin.src = spinBtnImage; var spinUpImage = opt.imageBasePath+opt.spinUpImage; var btnSpinUp = new Image(); btnSpinUp.src = spinUpImage; var spinDownImage = opt.imageBasePath+opt.spinDownImage; var btnSpinDown = new Image(); btnSpinDown.src = spinDownImage; var btn = $(document.createElement('img')); btn.attr('src', spinBtnImage); btn.css({cursor: 'pointer', verticalAlign: '-20%', padding: 0, margin: 0}); txt.after(btn); txt.css({marginRight:-18, paddingRight:0}); function spin(vector){ var val = txt.val(); if(!isNaN(val)){ val = parseFloat(val) + (vector*opt.interval); if(opt.min!=null && val<opt.min) val=opt.min; if(opt.min!=null && val>opt.max) val=opt.max; if(val != txt.val()){ txt.val(val); txt.change(); src = (vector > 0 ? spinUpImage : spinDownImage); btn.attr('src', src); if(opt.timeBlink<opt.timeInterval) setTimeout(function(){btn.attr('src', spinBtnImage);}, opt.timeBlink); } } } btn.mousedown(function(e){ var pos = e.pageY - btn.offset().top; var vector = (btn.height()/2 > pos ? 1 : -1); (function(){ spin(vector); var tk = setTimeout(arguments.callee, opt.timeInterval); $(document).one('mouseup', function(){ clearTimeout(tk); btn.attr('src', spinBtnImage); }); })(); return false; }); }); } }); })(jQuery);
<html>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="jquery.spin.js" ></script>
<center>
<ul >
<li>
<label>打印份数:</label>
<input name="caseCount" id="caseCount" style="width:300px" value="0" readonly/>
<b style="color:red;">*</b>
</li>
</ul>
</center>
<script type="text/javascript">
//加载文本框控制键自增自减
$(document).ready(function(){
//$('#caseCount').spin();
//$('#number').spin({interval:10});
$('#caseCount').spin({max:100,min: 0,imageBasePath: 'img/'});
//$('#number').spin({imageBasePath: '/images/'});
});
</script>
</html>