滚动demo：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/jquery.js"></script> <style> *{margin: 0; padding: 0;} span{display: block;} #container{height: 71px; overflow: hidden;} </style> </head> <body> <span id="container" data-toggle> <ul class="box" data-target> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </span> <script> ;(function ($) { 'use strict'; var Roll = function (element, options) { this.element = $(element); this.defaults = $.extend({}, Roll.defaults, options); this.target = this.element.find('[data-target]'); this.cloneTarget = this.target.clone(true); this.element.append(this.cloneTarget); this.init(); } Roll.defaults = { timer: null, speed: 10, time: 25 } Roll.prototype.init = function () { var that = this; $(document).on('mouseenter', '[data-target] li', $.proxy(this.enter, this)); $(document).on('mouseleave', '[data-target] li', $.proxy(this.leave, this)); this.defaults.timer = setInterval(function () { that.rolling(); }, this.defaults.time); } Roll.prototype.enter = function (e) { var $this = $(e.target); clearInterval(this.defaults.timer); $this.css({'backgroundColor': 'pink', 'color': 'white'}); } Roll.prototype.leave = function (e) { var $this = $(e.target), that = this; this.defaults.timer = setInterval(function () { that.rolling(); }, this.defaults.time); $this.css({'backgroundColor': 'white', 'color': 'black'}); } Roll.prototype.rolling = function () { if (this.element.scrollTop() === this.cloneTarget.height()) { this.defaults.speed = 0 this.element.scrollTop(this.defaults.speed); } else { this.defaults.speed++; this.element.scrollTop(this.defaults.speed); }; } var old = $.fn.roll; $.fn.roll = function (options) { return this.each(function () { var $this = $(this); var data = $this.data('bui.roll'); if (!data) { data = $this.data('bui.roll', (data = new Roll(this, options))) }; }) } $.fn.roll.Constructor = Roll; $.fn.roll.noConflict = function () { $.fn.roll = old; return this; } }(jQuery)); $("#container").roll({time: 20}); </script> </body> </html>
日期选择器：
;(function ($) { 'use strict'; var wisdomRoot = '.wisdom-quan-date'; var Digit = function (element) { this.$element = $(element); this.dropYearWrap = this.$element.find('.wisdom-digit-drop-year'); this.dropMonthWrap = this.$element.find('.wisdom-digit-drop-month'); this.dropYearContent = this.$element.find('.wisdom-digit-drop-year ul'); this.dropMonthContent = this.$element.find('.wisdom-digit-drop-month ul'); this.yearDigit = this.$element.find('.year-digit-content'); this.yearI = this.$element.find('.year-digit-i'); this.monthDigit = this.$element.find('.month-digit-content'); this.monthI = this.$element.find('.month-digit-i'); this.wisdomBtn = $('.wisdom-btn input[type="button"]'); this.init(); } Digit.prototype.setUpNum = function (year, month, offset) { window.maxDateYear = year; window.minDateMonth = month + offset - 12; } Digit.prototype.init = function () { var dateAll = new Date(), dateYear = dateAll.getFullYear(), dateMonth = dateAll.getMonth() + 1, that = this, path; window.dateYear = dateYear; window.dateMonth = dateMonth; this.dropYearWrap.hide(); this.dropMonthWrap.hide(); this.get2Num((+this.yearDigit.text()), (+this.monthDigit.text())); this.setUpNum(dateYear, dateMonth, 9); window.initYear = (+this.yearDigit.text()); if (dateMonth + 9 < 12) { this.dropYearContent.html(this.getYear(dateYear, dateMonth, 0)); this.dropMonthContent.html(this.getMonth((+this.yearDigit.text()), (+this.monthDigit.text()))); } else { this.dropYearContent.html(this.getYear(dateYear, dateMonth, 1)); this.dropMonthContent.html(this.getMonth((+this.yearDigit.text()), (+this.monthDigit.text()))); } this.yearDigit.bind('click', $.proxy(this.yearToggle, this)); this.yearI.bind('click', $.proxy(this.yearToggle, this)); this.monthDigit.bind('click', $.proxy(this.monthToggle, this)); this.monthI.bind('click', $.proxy(this.monthToggle, this)); path = '' + this.yearDigit.text() + this.monthDigit.text(); this.wisdomBtn.bind('click', function () { window.open('/community/club' + ((path ? path : false) || ('' + dateYear + (dateYear < '2009' ? '00' : dateMonth))), '_blank'); }); $('.wisdom-ask').bind('click.digit-other-event', function (event) { event.stopPropagation(); var $this = $(event.target); if (!/(month-digit-i)|(year-digit-i)|(year-digit-content)|(month-digit-content)/.test($this.attr('class'))) { that.dropYearWrap.hide(); that.dropMonthWrap.hide(); } }); var yearLi = this.dropYearContent.find('li'), monthLi = this.dropMonthContent.find('li'); var flag = false; yearLi.bind('click',$.proxy(function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.monthDigit.text(); path = '' + txt + txt2; $this.addClass('curren').siblings().removeClass('curren'); that.yearDigit.html(txt); that.get2Num(txt, txt2) if (((+txt) === window.maxDateYear) && (flag=== true)) { this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, 12)); this.dropMonthContent.find('li').click( function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.yearDigit.text(); path = '' + txt2 + txt; $this.addClass('curren').siblings().removeClass('curren'); that.monthDigit.html(txt); that.get2Num(txt2, txt); that.dropMonthWrap.hide(); }); } else if ((+txt > window.maxDateYear)){ flag = true; this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, Math.abs(window.minDateMonth))); this.dropMonthContent.find('li').click( function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.yearDigit.text(); path = '' + txt2 + txt; $this.addClass('curren').siblings().removeClass('curren'); that.monthDigit.html(txt); that.get2Num(txt2, txt); that.dropMonthWrap.hide(); }) } else if (((+txt) === window.maxDateYear) && (flag === false)) { this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()), 1, (12 - Math.abs(window.minDateMonth)))); this.dropMonthContent.find('li').click( function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.yearDigit.text(); path = '' + txt2 + txt; $this.addClass('curren').siblings().removeClass('curren'); that.monthDigit.html(txt); that.get2Num(txt2, txt); that.dropMonthWrap.hide(); }); } else { this.dropMonthContent.html(this.getMonth(dateYear, (+that.monthDigit.text()))); this.dropMonthContent.find('li').click( function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.yearDigit.text(); path = '' + txt2 + txt; $this.addClass('curren').siblings().removeClass('curren'); that.monthDigit.html(txt); that.get2Num(txt2, txt); that.dropMonthWrap.hide(); }) } that.dropYearWrap.hide(); }, this)); monthLi.bind('click', function (e) { var $this = $(e.target), txt = $this.text(), txt2 = that.yearDigit.text(); path = '' + txt2 + txt; $this.addClass('curren').siblings().removeClass('curren'); that.monthDigit.html(txt); that.get2Num(txt2, txt); that.dropMonthWrap.hide(); }); } Digit.prototype.yearToggle = function () { if (this.dropYearWrap.css('display') === 'none') { this.dropYearWrap.show(); } else { this.dropYearWrap.hide(); } } Digit.prototype.monthToggle = function () { if (this.dropMonthWrap.css('display') === 'none') { this.dropMonthWrap.show(); } else { this.dropMonthWrap.hide(); } } Digit.prototype.get2Num = function (year, month) { var month = year < '2009' ? '00' : month; $.ajax({ url: '/ask/ask_ajax.php', type: 'get', dataType: 'json', data: { action: 'get_birthclub_info', year: year, month: +month }, success: function (resp) { if (resp.status === 'success') { var user_count; if (resp.data === null) { $('.wisdom-count strong').html(0); return; } user_count = resp.data.user_count; if (user_count) { $('.wisdom-count strong').html(user_count); } } } }); } Digit.prototype.toDouble = function (num) { if (num < 10) { return '0' + num; } else { return '' + num; } } Digit.prototype.getYear = function (current, dateMonth, start, end) { var start = start || 0, end = end || 6, totalYearNum = start + end, i = 1, tempYear = [], tmpl = current, current = current - end; for (; i <= totalYearNum; i ++) { (function (num) { if ((num + current) === window.initYear) { tempYear.unshift('<li class="curren">' + (current + num) + '</li>'); } else { tempYear.unshift('<li>' + (current + num) + '</li>'); } })(i); } return tempYear.join('') } Digit.prototype.getMonth = function (dateYear, current, start, end) { var start = start || 1, end = end || 12, i = 1, tempMonth = [], that = this; for (; i <= end; i ++) { (function (num) { if (num === current) { tempMonth.unshift('<li class="curren">' + that.toDouble(num) + '</li>') } else { tempMonth.unshift('<li>' + that.toDouble(num) + '</li>') } })(i); } return tempMonth.join(''); } var old = $.fn.digit; $.fn.digit = function (option) { return this.each(function () { var $this = $(this), data = $this.data('bui.digit'); if (!data) { data = $this.data('bui.digit', (data = new Digit(this))); } if (typeof option === 'string') { data[option].call($this); } }) } $.fn.digit.Constructor = Digit; $.fn.digit.noConflict = function () { $.fn.digit = old; return this; } $(document).on('mouseenter.bui.digit.data-api', wisdomRoot, Digit.prototype.setUp); }(jQuery));
bootstrap提供了很优美的插件写法， 可以拿来学习练手