也写个豆瓣的滚动效果。

效果可以在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.

 

转载于:https://www.cnblogs.com/sky000/archive/2010/10/14/1851307.html