也寫個豆瓣的滾動效果。

效果可以在http://site.douban.com/about看到，左下邊。它是基於jquery寫的。

 

function wb() {this.init.apply(this, arguments)}wb.prototype = {init: function(obj, opts) {var items_box = typeof obj == 'string' ? document.getElementById(obj) : obj;var items = items_box.getElementsByTagName('li'),len = items.length,h = items[0].offsetHeight;var timer = null;var _this = this;timer = setInterval(function() {_this.set(items[len - 1], 0) items_box.insertBefore(items[len - 1], items[0]);items_box.style.marginTop = -h + 'px';_this.fx( - h, 0,function(x) {items_box.style.marginTop = x + 'px';},function() {_this.fx(0, 1,function(x) {_this.set(items[0], x);})})},3000);},fx: function(f, t, fn, callback) {var D = Date,d = new D,e, T = 320,F = function(x) {return (x /= 0.5) < 1 ? (0.5 * Math.pow(x, 2)) : ( - 0.5 * ((x -= 2) * x - 2))};return e = setInterval(function() {var z = Math.min(1, (new D - d) / T);if (false === fn( + f + (t - f) * F(z)) || z == 1) {if (callback && typeof callback == 'function') callback();clearInterval(e);}},10);},set: function(el, val) {el.style.filter = "alpha(opacity=" + parseInt(val * 100) + ")";el.style.opacity = val;}}window.onload = function() {new wb('list')}

結構去豆瓣網上扣吧。給ul加個ID，然後window.onload = function(){new wb('list')}，調用相同的ID就可以了，比如這裡的list.