滚动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提供了很优美的插件写法， 可以拿来学习练手