|
[tr][td]
图片：134307lhrydrh62sg1rrr8.jpg  介绍来自于tympanus的一个全屏幻灯特效教程，在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效，你将看到每一个幻灯都从水平或者垂直中间断开然后消失，使用不同的data-attributes属性来定义类型，旋转和角度等幻灯属性，这样我们可以创建非常独特的幻灯效果。 我们将使用到如下的插件： [*]jQuery cond by Ben Alman：帮助你使用链式来书写if-then-else语句 [*]jQuery Transit by Rico Sta. Cruz：帮助你更见简单快捷的使用CSS3动画 浏览器支持： 图片：134307lhrydrh62sg1rrr8.jpg 主要代码 HTML代码： [b]« Previous Demo: [/b]3D Bouncing Ball with CSS3 [b]Back to the Codrops Article[/b] Not supported by your browser [size=2]A bene placito[/size] [quote]You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity. Ralph Waldo Emerson[/quote] [size=2]Regula aurea[/size] [quote]Until he extends the circle of his compassion to all living things, man will not himself find peace. Albert Schweitzer[/quote] [size=2]Dum spiro, spero[/size] [quote]Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs. Dame Jane Morris Goodall[/quote] [size=2]Donna nobis pacem[/size] [quote]The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk. Michael Klaper M.D.[/quote] [size=2]Acta Non Verba[/size] [quote]I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you. Margi Clarke[/quote] Javascript代码 (function( $, undefined ) { /* * smartresize: debounced resize event for jQuery * * latest version and complete README available on Github: * https://github.com/louisremi/jquery.smartresize.js * * Copyright 2011 @louis_remi * Licensed under the MIT license. */ var $event = $.event, resizeTimeout; $event.special.smartresize = { setup: function() { $(this).bind( "resize", $event.special.smartresize.handler ); }, teardown: function() { $(this).unbind( "resize", $event.special.smartresize.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments; // set correct event type event.type = "smartresize"; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } resizeTimeout = setTimeout(function() { jQuery.event.handle.apply( context, args ); }, execAsap === "execAsap"? 0 : 100 ); } }; $.fn.smartresize = function( fn ) { return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); }; $.Slitslider = function( options, element ) { this.$slider = $( element ); this._init( options ); }; $.Slitslider.defaults = { speed : 1000, // transitions speed autoplay : false, // slideshow on / off interval : 4000, // time between transitions optOpacity : false, // if true the slides's cuts will also animate its opacity translateF : 230, // amount (%) to translate both cut1 and cut2 - adjust as necessary maxAngle : 25, // maximum possible angle maxScale : 2 // maximum possible scale }; $.Slitslider.prototype = { _init : function( options ) { // the options this.options = $.extend( true, {}, $.Slitslider.defaults, options ); // the slider this.$slides = this.$slider.children( '.sl-slide' ).hide(); // total slides this.slidesCount= this.$slides.length; // current slide this.current = 0; // allow to navigate this.isAnimating= false; // get window size this._getWinSize(); // layout this._layout(); // load some events this._loadEvents(); // slideshow if( this.options.autoplay ) { this._startSlideshow(); } }, // gets the current window width & height _getWinSize : function() { var $win = $( window ); this.windowProp = { width : $win.width(), height : $win.height() }; }, _layout : function() { this.$slideWrapper = $( '<div class="sl-slides-wrapper" />' ); // wrap the slides in sl-slides-wrapper this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) { var $slide = $( this ), // vertical || horizontal orientation = $slide.data( 'orientation' ); $slide.addClass( 'sl-slide-' + orientation ) .children() .wrapAll( '<div class="sl-content-wrapper" />' ) .wrapAll( '<div class="sl-content" />' ); } ); // set the right size of the slider / slides for the current window size this._setSize(); // show first slide this.$slides.eq( this.current ).show(); // add navigation if( this.slidesCount > 1 ) { this.$slider.append( 'PreviousNext' ); } }, _setSize : function() { // the slider and content wrappers will have the window's width and height var css = { width : this.windowProp.width, height : this.windowProp.height }; this.$slider.css( css ).find( 'div.sl-content-wrapper' ).css( css ); }, _loadEvents : function() { var _self = this; if( this.slidesCount > 1 ) { // navigate "in" or "out" this.$slider.find( 'nav > span.sl-prev' ).on( 'click.slitslider', function( event ) { if( _self.options.autoplay ) { clearTimeout( _self.slideshow ); _self.options.autoplay = false; } _self._navigate( 'out' ); } ).end().find( 'nav > span.sl-next' ).on( 'click.slitslider', function( event ) { if( _self.options.autoplay ) { clearTimeout( _self.slideshow ); _self.options.autoplay = false; } _self._navigate( 'in' ); } ); } $( window ).on( 'smartresize.slitslider', function( event ) { // update window size _self._getWinSize(); _self._setSize(); } ); }, _navigate : function( dir ) { // return if currently navigating / animating if( this.isAnimating ) { return false; } var _self = this; // while isAnimating is true we can't navigate.. this.isAnimating = true; // the current slide var $currentSlide = this.$slides.eq( this.current ), css; // set new current ( dir === 'in' ) ? ( ( this.current < this.slidesCount - 1 ) ? ++this.current : this.current = 0 ) : ( ( this.current > 0 ) ? --this.current : this.current = this.slidesCount - 1 ); // next slide to be shown var $nextSlide = this.$slides.eq( this.current ).show(), // the slide we want to cut and animate $movingSlide = ( dir === 'in' ) ? $currentSlide : $nextSlide, // the following are the data attrs set for each slide orientation = $movingSlide.data( 'orientation' ) || 'horizontal', cut1angle = $movingSlide.data( 'cut1Rotation' ) || 0, cut1scale = $movingSlide.data( 'cut1Scale' ) || 1, cut2angle = $movingSlide.data( 'cut2Rotation' ) || 0, cut2scale = $movingSlide.data( 'cut2Scale' ) || 1; this._validateValues( cut1angle, cut2angle, cut1scale, cut2scale, orientation ); if( orientation === 'vertical' ) { css = { marginLeft : -this.windowProp.width / 2 }; } else if( orientation === 'horizontal' ) { css = { marginTop : -this.windowProp.height / 2 }; } var // default slide's cuts style resetStyle = ( orientation === 'horizontal' ) ? { x : '0%', y : '0%', rotate : 0, scale : 1, opacity : 1 } : { x : '0%', y : '0%', rotate : 0, scale : 1, opacity : 1 }, // cut1 style cut1Style = ( orientation === 'horizontal' ) ? { y : '-' + this.options.translateF + '%', rotate : cut1angle, scale : cut1scale } : { x : '-' + this.options.translateF + '%', rotate : cut1angle, scale : cut1scale }, // cut2 style cut2Style = ( orientation === 'horizontal' ) ? { y : this.options.translateF + '%', rotate : cut2angle, scale : cut2scale } : { x : this.options.translateF + '%', rotate : cut2angle, scale : cut2scale }; if( this.options.optOpacity ) { cut1Style.opacity = 0; cut2Style.opacity = 0; } // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "in" // or going "out" according to the direction. // the idea is to make it more interesting by giving some animations to the respective slide's elements ( dir === 'in' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' ); $currentSlide.removeClass( 'sl-trans-elems' ); // add the 2 cuts and animate them ( we are using the jquery.transit plugin : http://ricostacruz.com/jquery.transit/ to add transitions to the elements ) $movingSlide.css( 'z-index', this.slidesCount ) .find( 'div.sl-content-wrapper' ) .wrap( '<div class="sl-content-cut" />' ) .parent() .cond( dir === 'out', function() { this.css( cut1Style ) .transition( resetStyle, _self.options.speed, dir ); }, function() { this.transition( cut1Style, _self.options.speed, dir ) } ) .clone() .appendTo( $movingSlide ) .cond( dir === 'out', function() { var cut = this; cut.css( cut2Style ) .transition( resetStyle, _self.options.speed, dir , function() { _self._onEndNavigate( cut, $currentSlide, dir ); } ) }, function() { var cut = this; cut.transition( cut2Style, _self.options.speed, dir, function() { _self._onEndNavigate( cut, $currentSlide, dir ); } ) } ) .find( 'div.sl-content-wrapper' ) .css( css ); }, _validateValues : function( cut1angle, cut2angle, cut1scale, cut2scale, orientation ) { // OK, so we are restricting the angles and scale values here. // This is to avoid the cuts wrong sides to be shown. // you can adjust these values as you wish but make sure you also ajust the // paddings of the slides and also the this.options.translateF and scale data attrs if( cut1angle > this.options.maxAngle || cut1angle < -this.options.maxAngle ) { cut1angle = this.options.maxAngle; } if( cut2angle > this.options.maxAngle || cut2angle < -this.options.maxAngle ) { cut2angle = this.options.maxAngle; } if( cut1scale > this.options.maxScale || cut1scale this.options.maxScale || cut2scale |
|
