较小的云旋转木马

我对jquery很新，我正在尝试将云轮播重新调整为高一点。 但是，不知怎的，我似乎无法在整个代码中找到任何高度指示器。

////////////////////////////////////////////////////////////////////////////////// // CloudCarousel V1.0.5 // (c) 2011 by R Cecco.  // MIT License // // Reflection code based on plugin by Christophe Beyls  // // Please retain this copyright header in all versions of the software ////////////////////////////////////////////////////////////////////////////////// (function($) { // START Reflection object. // Creates a reflection for underneath an image. // IE uses an image with IE specific filter properties, other browsers use the Canvas tag. // The position and size of the reflection gets updated by updateAll() in Controller. function Reflection(img, reflHeight, opacity) { var reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent; parent = $(img.parentNode); this.element = reflection = parent.append("").find(':last')[0]; if ( !reflection.getContext && $.browser.msie) { this.element = reflection = parent.append("").find(':last')[0]; reflection.src = img.src; reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")"; } else { cntx = reflection.getContext("2d"); try { $(reflection).attr({width: imageWidth, height: reflHeight}); cntx.save(); cntx.translate(0, imageHeight-1); cntx.scale(1, -1); cntx.drawImage(img, 0, 0, imageWidth, imageHeight); cntx.restore(); cntx.globalCompositeOperation = "destination-out"; gradient = cntx.createLinearGradient(0, 0, 0, reflHeight); gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")"); gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); cntx.fillStyle = gradient; cntx.fillRect(0, 0, imageWidth, reflHeight); } catch(e) { return; } } // Store a copy of the alt and title attrs into the reflection $(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} ); } //END Reflection object // START Item object. // A wrapper object for items within the carousel. var Item = function(imgIn, options) { this.orgWidth = imgIn.width; this.orgHeight = imgIn.height; this.image = imgIn; this.reflection = null; this.alt = imgIn.alt; this.title = imgIn.title; this.imageOK = false; this.options = options; 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'); // Bizarre. This seems to reset image width to 0 on webkit! };// END Item object // Controller object. // This handles moving all the items, dealing with mouse clicks etc. var Controller = function(container, images, options) { var items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this; this.controlTimer = 0; this.stopped = false; //this.imagesLoaded = 0; this.container = container; this.xRadius = options.xRadius; this.yRadius = options.yRadius; this.showFrontTextTimer = 0; this.autoRotateTimer = 0; if (options.xRadius === 0) { this.xRadius = ($(container).width()/2.3); } if (options.yRadius === 0) { this.yRadius = ($(container).height()/6); } this.xCentre = options.xPos; this.yCentre = options.yPos; this.frontIndex = 0; // Index of the item at the front // Start with the first item at the front. this.rotation = this.destRotation = Math.PI/2; this.timeDelay = 1000/options.FPS; // Turn on the infoBox if(options.altBox !== null) { $(options.altBox).css('display','block'); $(options.titleBox).css('display','block'); } // Turn on relative position for container to allow absolutely positioned elements // within it to work. $(container).css({ position:'relative', overflow:'hidden'} ); $(options.buttonLeft).css('display','inline'); $(options.buttonRight).css('display','inline'); // Setup the buttons. $(options.buttonLeft).bind('mouseup',this,function(event){ event.data.rotate(-1); return false; }); $(options.buttonRight).bind('mouseup',this,function(event){ event.data.rotate(1); return false; }); // You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel if (options.mouseWheel) { $(container).bind('mousewheel',this,function(event, delta) { event.data.rotate(delta); return false; }); } $(container).bind('mouseover click',this,function(event){ clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over. var text = $(event.target).attr('alt'); // If we have moved over a carousel item, then show the alt and title text. if ( text !== undefined && text !== null ) { clearTimeout(event.data.showFrontTextTimer); $(options.altBox).html( ($(event.target).attr('alt') )); $(options.titleBox).html( ($(event.target).attr('title') )); if ( options.bringToFront && event.type == 'click' ) { var idx = $(event.target).data('itemIndex'); var frontIndex = event.data.frontIndex; //var diff = idx - frontIndex; var diff = (idx - frontIndex) % images.length; if (Math.abs(diff) > images.length / 2) { diff += (diff > 0 ? -images.length : images.length); } event.data.rotate(-diff); } } }); // If we have moved out of a carousel item (or the container itself), // restore the text of the front item in 1 second. $(container).bind('mouseout',this,function(event){ var context = event.data; clearTimeout(context.showFrontTextTimer); context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000); context.autoRotate(); // Start auto rotation. }); // Prevent items from being selected as mouse is moved and clicked in the container. $(container).bind('mousedown',this,function(event){ event.data.container.focus(); return false; }); container.onselectstart = function () { return false; }; // For IE. this.innerWrapper = $(container).wrapInner('
').children()[0]; // Shows the text from the front most item. this.showFrontText = function() { if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet. $(options.titleBox).html( $(items[this.frontIndex].image).attr('title')); $(options.altBox).html( $(items[this.frontIndex].image).attr('alt')); }; this.go = function() { if(this.controlTimer !== 0) { return; } var context = this; this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay); }; this.stop = function() { clearTimeout(this.controlTimer); this.controlTimer = 0; }; // Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by. this.rotate = function(direction) { this.frontIndex -= direction; this.frontIndex %= items.length; this.destRotation += ( Math.PI / items.length ) * ( 2*direction ); this.showFrontText(); this.go(); }; this.autoRotate = function() { if ( options.autoRotate !== 'no' ) { var dir = (options.autoRotate === 'right')? 1 : -1; this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay ); } }; // This is the main loop function that moves everything. this.updateAll = function() { var minScale = options.minScale; // This is the smallest scale applied to the furthest item. var smallRange = (1-minScale) * 0.5; var w,h,x,y,scale,item,sinVal; var change = (this.destRotation - this.rotation); var absChange = Math.abs(change); this.rotation += change * options.speed; if ( absChange < 0.001 ) { this.rotation = this.destRotation; } var itemsLen = items.length; var spacing = (Math.PI / itemsLen) * 2; //var wrapStyle = null; var radians = this.rotation; var isMSIE = $.browser.msie; // Turn off display. This can reduce repaints/reflows when making style and position changes in the loop. // See http://dev.opera.com/articles/view/efficient-javascript/?page=3 this.innerWrapper.style.display = 'none'; var style; var px = 'px', reflHeight; var context = this; for (var i = 0; i>0; // >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index. if (item.reflection !== null) { reflHeight = options.reflHeight * scale; style = item.reflection.element.style; style.left = x + px; style.top = y + h + options.reflGap * scale + px; style.width = w + px; if (isMSIE) { style.filter.finishy = (reflHeight / h * 100); }else { style.height = reflHeight + px; } } } radians += spacing; } // Turn display back on. this.innerWrapper.style.display = 'block'; // If we have a preceptable change in rotation then loop again next frame. if ( absChange >= 0.001 ) { this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay); }else { // Otherwise just stop completely. this.stop(); } }; // END updateAll // Create an Item object for each image // func = function(){return;ctx.updateAll();} ; // Check if images have loaded. We need valid widths and heights for the reflections. this.checkImagesLoaded = function() { var i; for(i=0;i<images.length;i++) { if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete) )) { return; } } for(i=0;i<images.length;i++) { items.push( new Item( images[i], options ) ); $(images[i]).data('itemIndex',i); } // If all images have valid widths and heights, we can stop checking. clearInterval(this.tt); this.showFrontText(); this.autoRotate(); this.updateAll(); }; this.tt = setInterval( function(){ctx.checkImagesLoaded();},50); }; // END Controller object // The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one. $.fn.CloudCarousel = function(options) { this.each( function() { options = $.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, bringToFront: false },options ); // Create a Controller for each carousel. $(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) ); }); return this; }; })(jQuery); 

这里启动脚本，但也没有高度选项

 $("#carousel1").CloudCarousel( { reflHeight: 40, reflGap:2, titleBox: $('#da-vinci-title'), altBox: $('#da-vinci-alt'), buttonLeft: $('#slider-left-but'), buttonRight: $('#slider-right-but'), yRadius:30, xPos: 480, yPos: 32, speed:0.15, } ); 

Answer 1

你所追求的最终结果（“试图将云轮播重新缩放得有点不高”）有点模糊，但根据你对评论的回答，它看起来好像你想要减少旋转木马圆的半径。 更改后，其他所有内容都可以通过当前选项进行操作。

它出现在cloud-carousel.1.0.5.js的第230行确定了半径的大小。

 var smallRange = (1-minScale) * 0.5; 

替换.5值会产生以下结果。

0.75

0.5

0.25

0.15

不幸的是，您需要编辑源以更改此值。 您可以对所需的值进行硬编码或更新选项以包含此值。 这需要对CloudCarousel源进行微小更改。 代码更改，下面包含一个工作示例。

230行

 var smallRange = (1-minScale) * options.carouselRadius; 

第352行

 carouselRadius: .5, 

工作小提琴

http://jsfiddle.net/8V8JZ/