jQuery 3d视角旋转木马效果

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}html { height: 100%;}body { height: 100%; color: #eee; background: black; margin: 0; overflow-x: hidden;}#showcase { height: 460px; //background: #16235e; //background: -moz-linear-gradient(top, #16235e 0%, #020223 100%); /* FF3.6+ */ //background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#16235e), color-stop(100%,#020223)); /* Chrome, Safari4+ */ //background: -webkit-linear-gradient(top, #16235e 0%, #020223 100%); /* Chrome10+, Safari5.1+ */ //background: -o-linear-gradient(top, #16235e 0%, #020223 100%); /* Opera 11.10+ */ //background: -ms-linear-gradient(top, #16235e 0%, #020223 100%); /* IE10+ */ //background: linear-gradient(to bottom, #16235e 0%, #020223 100%); /* W3C */ -webkit-box-shadow: 0px 0px 13px 5px #DB1242; -moz-box-shadow: 0px 0px 13px 5px #DB1242; box-shadow: 0px 0px 13px 5px #DB1242; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } #share { top: -9px; } #credits { top: -15px; }$(function() { var showcase = $("#showcase"), title = $('#item-title') showcase.Cloud9Carousel( { yOrigin: 42, yRadius: 48, mirror: { gap: 12, height: 0.2 }, buttonLeft: $("#nav > .left"), buttonRight: $("#nav > .right"), autoPlay: 1, bringToFront: true, onRendered: rendered, onLoaded: function() { showcase.css( 'visibility', 'visible' ) showcase.css( 'display', 'none' ) showcase.fadeIn( 1500 ) } } ) function rendered( carousel ) { title.text( carousel.nearestItem().element.alt ) // Fade in based on proximity of the item var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI) title.css('opacity', 0.5 + (0.5 * c)) } // // Simulate physical button click effect // $('#nav > button').click( function( e ) { var b = $(e.target).addClass( 'down' ) setTimeout( function() { b.removeClass( 'down' ) }, 80 ) } ) $(document).keydown( function( e ) { // // More codes: http://www.javascripter.net/faq/keycodes.htm // switch( e.keyCode ) { /* left arrow */ case 37: $('#nav > .left').click() break /* right arrow */ case 39: $('#nav > .right').click() } } ) })

在线演示        积分下载        6毛下载        砍两刀下载