//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.3
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// 2010.6.22 lilin 增加 给标题自动获取超级连接。
//////////////////////////////////////////////////////////////////////////////////
(function($) { function Reflection(a, b, c) { var d, cntx, imageWidth = a.width, imageHeight = a.width, gradient, parent; parent = $(a.parentNode); if ($.browser.msie) { this.element = d = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0]; d.src = a.src; d.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (c * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (b / imageHeight * 100) + ")" } else { this.element = d = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0]; if (!d.getContext) { return } cntx = d.getContext("2d"); try { $(d).attr({ width: imageWidth, height: b }); cntx.save(); cntx.translate(0, imageHeight - 1); cntx.scale(1, -1); cntx.drawImage(a, 0, 0, imageWidth, imageHeight); cntx.restore(); cntx.globalCompositeOperation = "destination-out"; gradient = cntx.createLinearGradient(0, 0, 0, b); gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - c) + ")"); gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); cntx.fillStyle = gradient; cntx.fillRect(0, 0, imageWidth, b) } catch (e) { return } } $(d).attr({ 'alt': $(a).attr('alt'), title: $(a).attr('title') }) } var s = function(a, b) { this.orgWidth = a.width; this.orgHeight = a.height; this.image = a; this.reflection = null; this.alt = a.alt; this.title = a.title; this.imageOK = false; this.options = b; this.imageOK = true; if (this.options.reflHeight > 0) { this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity) } $(this.image).css('position', 'absolute') }; var t = function(o, p, q) { var r = [], funcSin = Math.sin, funcCos = Math.cos, ctx = this; this.controlTimer = 0; this.stopped = false; this.container = o; this.xRadius = q.xRadius; this.yRadius = q.yRadius; this.showFrontTextTimer = 0; this.autoRotateTimer = 0; if (q.xRadius === 0) { this.xRadius = ($(o).width() / 2.3) } if (q.yRadius === 0) { this.yRadius = ($(o).height() / 6) } this.xCentre = q.xPos; this.yCentre = q.yPos; this.frontIndex = 0; this.rotation = this.destRotation = Math.PI / 2; this.timeDelay = 1000 / q.FPS; if (q.altBox !== null) { $(q.altBox).css('display', 'block'); $(q.titleBox).css('display', 'block') } $(o).css({ position: 'relative', overflow: 'hidden' }); $(q.buttonLeft).css('display', 'inline'); $(q.buttonRight).css('display', 'inline'); $(q.buttonLeft).bind('mouseup', this, function(a) { a.data.rotate(-1); return false }); $(q.buttonRight).bind('mouseup', this, function(a) { a.data.rotate(1); return false }); if (q.mouseWheel) { $(o).bind('mousewheel', this, function(a, b) { a.data.rotate(b); return false }) } $(o).bind('mouseover', this, function(a) { clearInterval(a.data.autoRotateTimer); var b = $(a.target).attr('alt'); if (b !== undefined && b !== null) { clearTimeout(a.data.showFrontTextTimer); $(q.altBox).html("<a href='" + $(a.target).parent().attr('href') + "' target='_blank'>" + $(a.target).attr('alt') + "</a>"); $(q.titleBox).html("<a href='" + $(a.target).parent().attr('href') + "' target='_blank'>" + $(a.target).attr('title') + "</a>") } }); $(o).bind('mouseout', this, function(a) { var b = a.data; clearTimeout(b.showFrontTextTimer); b.showFrontTextTimer = setTimeout(function() { b.showFrontText() }, 1000); b.autoRotate() }); $(o).bind('mousedown', this, function(a) { a.data.container.focus(); return false }); o.onselectstart = function() { return false }; this.innerWrapper = $(o).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0]; this.showFrontText = function() { if (r[this.frontIndex] === undefined) { return } $(q.titleBox).html("<a href='" + $(r[this.frontIndex].image).parent().attr('href') + "' target='_blank'>" + $(r[this.frontIndex].image).attr('title') + "</a>"); $(q.altBox).html("<a href='" + $(r[this.frontIndex].image).parent().attr('href') + "' target='_blank'>" + $(r[this.frontIndex].image).attr('alt') + "</a>") }; this.go = function() { if (this.controlTimer !== 0) { return } var a = this; this.controlTimer = setTimeout(function() { a.updateAll() }, this.timeDelay) }; this.stop = function() { clearTimeout(this.controlTimer); this.controlTimer = 0 }; this.rotate = function(a) { this.frontIndex -= a; if (this.frontIndex < 0) { this.frontIndex = r.length - 1 } if (this.frontIndex > r.length - 1) { this.frontIndex = 0 } this.destRotation += (Math.PI / r.length) * (2 * a); this.showFrontText(); this.go() }; this.autoRotate = function() { if (q.autoRotate !== 'no') { var a = (q.autoRotate === 'right') ? 1 : -1; this.autoRotateTimer = setInterval(function() { ctx.rotate(a) }, q.autoRotateDelay) } }; this.updateAll = function() { var a = q.minScale; var b = (1 - a) * 0.5; var w, h, x, y, scale, item, sinVal; var c = (this.destRotation - this.rotation); var d = Math.abs(c); this.rotation += c * q.speed; if (d < 0.001) { this.rotation = this.destRotation } var e = r.length; var f = (Math.PI / e) * 2; var g = this.rotation; var j = $.browser.msie; this.innerWrapper.style.display = 'none'; var k; var l = 'px', reflHeight; var m = this; for (var i = 0; i < e; i++) { item = r[i]; sinVal = funcSin(g); scale = ((sinVal + 1) * b) + a; x = this.xCentre + (((funcCos(g) * this.xRadius) - (item.orgWidth * 0.5)) * scale); y = this.yCentre + (((sinVal * this.yRadius)) * scale); if (item.imageOK) { var n = item.image; w = n.width = item.orgWidth * scale; h = n.height = item.orgHeight * scale; n.style.left = x + l; n.style.top = y + l; n.style.zIndex = (scale * 100) >> 0; if (item.reflection !== null) { reflHeight = q.reflHeight * scale; k = item.reflection.element.style; k.left = x + l; k.top = y + h + q.reflGap * scale + l; k.width = w + l; if (j) { k.filter.finishy = (reflHeight / h * 100) } else { k.height = reflHeight + l } } } g += f } this.innerWrapper.style.display = 'block'; if (d >= 0.001) { this.controlTimer = setTimeout(function() { m.updateAll() }, this.timeDelay) } else { this.stop() } }; this.checkImagesLoaded = function() { var i; for (i = 0; i < p.length; i++) { if ((p[i].width === undefined) || ((p[i].complete !== undefined) && (!p[i].complete))) { return } } for (i = 0; i < p.length; i++) { r.push(new s(p[i], q)) } clearInterval(this.tt); this.showFrontText(); this.autoRotate(); this.updateAll() }; this.tt = setInterval(function() { ctx.checkImagesLoaded() }, 50) }; $.fn.CloudCarousel = function(a) { this.each(function() { a = $.extend({}, { reflHeight: 0, reflOpacity: 0.5, reflGap: 0, minScale: 0.5, xPos: 0, yPos: 0, xRadius: 0, yRadius: 0, altBox: null, titleBox: null, FPS: 30, autoRotate: 'no', autoRotateDelay: 1500, speed: 0.2, mouseWheel: false }, a); $(this).data('cloudcarousel', new t(this, $('.cloudcarousel', $(this)), a)) }); return this } })(jQuery);