HTML5实现的震撼3D焦点图动画的示例代码


Posted in HTML / CSS onSeptember 26, 2019

这是一款基于HTML5和jQuery的3D焦点图动画,焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果,从而让图片出现3D的视觉效果。这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便。如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你。

HTML5实现的震撼3D焦点图动画的示例代码

HTML代码
 

<div class="dg-wrapper">
        <a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
        <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
        <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
        <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
        <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
        <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
        <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
        <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
        <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
        <a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
        <a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
        <a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
    </div>
    <nav>   
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>

CSS代码
 

.dg-container{
    width: 100%;
    height: 450px;
    position: relative;
}
.dg-wrapper{
    width: 481px;
    height: 316px;
    margin: 0 auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.dg-wrapper a{
    width: 482px;
    height: 316px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(../images/browser.png) no-repeat top left;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
    display: block;
    padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
    font-style: italic;
    text-align: center;
    line-height: 50px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    color: #333;
    font-size: 16px;
    width: 100%;
    bottom: -55px;
    display: none;
    position: absolute;
}
.dg-wrapper a.dg-center div{
    display: block;
}
.dg-container nav{
    width: 58px;
    position: absolute;
    z-index: 1000;
    bottom: 40px;
    left: 50%;
    margin-left: -29px;
}
.dg-container nav span{
    text-indent: -9000px;
    float: left;
    cursor:pointer;
    width: 24px;
    height: 25px;
    opacity: 0.8;
    background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
    opacity: 1;
}
.dg-container nav span.dg-next{
    background-position: top right;
    margin-left: 10px;
}</pre>

## JavaScript代码

<pre class="brush: javascript; gutter: false; first-line: 1 hljs" style="margin: 15px auto; padding: 10px 15px; display: block; overflow-x: auto; color: rgb(51, 51, 51); background: rgb(251, 251, 251); word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; font: 400 12px/20px "courier new"; border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/**
 * jquery.gallery.js
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 30 2012
 */

(function( $, undefined ) {

    /*
     * Gallery object.
     */
    $.Gallery               = function( options, element ) {

        this.$el    = $( element );
        this._init( options );

    };

    $.Gallery.defaults      = {
        current     : 0,    // index of current item
        autoplay    : false,// slideshow on / off
        interval    : 2000  // time between transitions
    };

    $.Gallery.prototype     = {
        _init               : function( options ) {

            this.options        = $.extend( true, {}, $.Gallery.defaults, options );

            // support for 3d / 2d transforms and transitions
            this.support3d      = Modernizr.csstransforms3d;
            this.support2d      = Modernizr.csstransforms;
            this.supportTrans   = Modernizr.csstransitions;

            this.$wrapper       = this.$el.find('.dg-wrapper');

            this.$items         = this.$wrapper.children();
            this.itemsCount     = this.$items.length;

            this.$nav           = this.$el.find('nav');
            this.$navPrev       = this.$nav.find('.dg-prev');
            this.$navNext       = this.$nav.find('.dg-next');

            // minimum of 3 items
            if( this.itemsCount < 3 ) {

                this.$nav.remove();
                return false;

            }   

            this.current        = this.options.current;

            this.isAnim         = false;

            this.$items.css({
                'opacity'   : 0,
                'visibility': 'hidden'
            });

            this._validate();

            this._layout();

            // load the events
            this._loadEvents();

            // slideshow
            if( this.options.autoplay ) {

                this._startSlideshow();

            }

        },
        _validate           : function() {

            if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

                this.current = 0;

            }   

        },
        _layout             : function() {

            // current, left and right items
            this._setItems();

            // current item is not changed
            // left and right one are rotated and translated
            var leftCSS, rightCSS, currentCSS;

            if( this.support3d && this.supportTrans ) {

                leftCSS     = {
                    '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                    '-moz-transform'    : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                    '-o-transform'      : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                    '-ms-transform'     : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                    'transform'         : 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
                };

                rightCSS    = {
                    '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                    '-moz-transform'    : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                    '-o-transform'      : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                    '-ms-transform'     : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                    'transform'         : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
                };

                leftCSS.opacity     = 1;
                leftCSS.visibility  = 'visible';
                rightCSS.opacity    = 1;
                rightCSS.visibility = 'visible';

            }
            else if( this.support2d && this.supportTrans ) {

                leftCSS     = {
                    '-webkit-transform' : 'translate(-350px) scale(0.8)',
                    '-moz-transform'    : 'translate(-350px) scale(0.8)',
                    '-o-transform'      : 'translate(-350px) scale(0.8)',
                    '-ms-transform'     : 'translate(-350px) scale(0.8)',
                    'transform'         : 'translate(-350px) scale(0.8)'
                };

                rightCSS    = {
                    '-webkit-transform' : 'translate(350px) scale(0.8)',
                    '-moz-transform'    : 'translate(350px) scale(0.8)',
                    '-o-transform'      : 'translate(350px) scale(0.8)',
                    '-ms-transform'     : 'translate(350px) scale(0.8)',
                    'transform'         : 'translate(350px) scale(0.8)'
                };

                currentCSS  = {
                    'z-index'           : 999
                };

                leftCSS.opacity     = 1;
                leftCSS.visibility  = 'visible';
                rightCSS.opacity    = 1;
                rightCSS.visibility = 'visible';

            }

            this.$leftItm.css( leftCSS || {} );
            this.$rightItm.css( rightCSS || {} );

            this.$currentItm.css( currentCSS || {} ).css({
                'opacity'   : 1,
                'visibility': 'visible'
            }).addClass('dg-center');

        },
        _setItems           : function() {

            this.$items.removeClass('dg-center');

            this.$currentItm    = this.$items.eq( this.current );
            this.$leftItm       = ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
            this.$rightItm      = ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

            if( !this.support3d && this.support2d && this.supportTrans ) {

                this.$items.css( 'z-index', 1 );
                this.$currentItm.css( 'z-index', 999 );

            }

            // next & previous items
            if( this.itemsCount > 3 ) {

                // next item
                this.$nextItm       = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
                this.$nextItm.css( this._getCoordinates('outright') );

                // previous item
                this.$prevItm       = ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
                this.$prevItm.css( this._getCoordinates('outleft') );

            }

        },
        _loadEvents         : function() {

            var _self   = this;

            this.$navPrev.on( 'click.gallery', function( event ) {

                if( _self.options.autoplay ) {

                    clearTimeout( _self.slideshow );
                    _self.options.autoplay  = false;

                }

                _self._navigate('prev');
                return false;

            });

            this.$navNext.on( 'click.gallery', function( event ) {

                if( _self.options.autoplay ) {

                    clearTimeout( _self.slideshow );
                    _self.options.autoplay  = false;

                }

                _self._navigate('next');
                return false;

            });

            this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {

                _self.$currentItm.addClass('dg-center');
                _self.$items.removeClass('dg-transition');
                _self.isAnim    = false;

            });

        },
        _getCoordinates     : function( position ) {

            if( this.support3d && this.supportTrans ) {

                switch( position ) {
                    case 'outleft':
                        return {
                            '-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                            '-moz-transform'    : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                            '-o-transform'      : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                            '-ms-transform'     : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                            'transform'         : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                            'opacity'           : 0,
                            'visibility'        : 'hidden'
                        };
                        break;
                    case 'outright':
                        return {
                            '-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                            '-moz-transform'    : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                            '-o-transform'      : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                            '-ms-transform'     : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                            'transform'         : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                            'opacity'           : 0,
                            'visibility'        : 'hidden'
                        };
                        break;
                    case 'left':
                        return {
                            '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-moz-transform'    : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-o-transform'      : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-ms-transform'     : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            'transform'         : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                    case 'right':
                        return {
                            '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-moz-transform'    : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-o-transform'      : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-ms-transform'     : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            'transform'         : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                    case 'center':
                        return {
                            '-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                            '-moz-transform'    : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                            '-o-transform'      : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                            '-ms-transform'     : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                            'transform'         : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                };

            }
            else if( this.support2d && this.supportTrans ) {

                switch( position ) {
                    case 'outleft':
                        return {
                            '-webkit-transform' : 'translate(-450px) scale(0.7)',
                            '-moz-transform'    : 'translate(-450px) scale(0.7)',
                            '-o-transform'      : 'translate(-450px) scale(0.7)',
                            '-ms-transform'     : 'translate(-450px) scale(0.7)',
                            'transform'         : 'translate(-450px) scale(0.7)',
                            'opacity'           : 0,
                            'visibility'        : 'hidden'
                        };
                        break;
                    case 'outright':
                        return {
                            '-webkit-transform' : 'translate(450px) scale(0.7)',
                            '-moz-transform'    : 'translate(450px) scale(0.7)',
                            '-o-transform'      : 'translate(450px) scale(0.7)',
                            '-ms-transform'     : 'translate(450px) scale(0.7)',
                            'transform'         : 'translate(450px) scale(0.7)',
                            'opacity'           : 0,
                            'visibility'        : 'hidden'
                        };
                        break;
                    case 'left':
                        return {
                            '-webkit-transform' : 'translate(-350px) scale(0.8)',
                            '-moz-transform'    : 'translate(-350px) scale(0.8)',
                            '-o-transform'      : 'translate(-350px) scale(0.8)',
                            '-ms-transform'     : 'translate(-350px) scale(0.8)',
                            'transform'         : 'translate(-350px) scale(0.8)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                    case 'right':
                        return {
                            '-webkit-transform' : 'translate(350px) scale(0.8)',
                            '-moz-transform'    : 'translate(350px) scale(0.8)',
                            '-o-transform'      : 'translate(350px) scale(0.8)',
                            '-ms-transform'     : 'translate(350px) scale(0.8)',
                            'transform'         : 'translate(350px) scale(0.8)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                    case 'center':
                        return {
                            '-webkit-transform' : 'translate(0px) scale(1)',
                            '-moz-transform'    : 'translate(0px) scale(1)',
                            '-o-transform'      : 'translate(0px) scale(1)',
                            '-ms-transform'     : 'translate(0px) scale(1)',
                            'transform'         : 'translate(0px) scale(1)',
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                };

            }
            else {

                switch( position ) {
                    case 'outleft'  : 
                    case 'outright' : 
                    case 'left'     : 
                    case 'right'    :
                        return {
                            'opacity'           : 0,
                            'visibility'        : 'hidden'
                        };
                        break;
                    case 'center'   :
                        return {
                            'opacity'           : 1,
                            'visibility'        : 'visible'
                        };
                        break;
                };

            }

        },
        _navigate           : function( dir ) {

            if( this.supportTrans && this.isAnim )
                return false;

            this.isAnim = true;

            switch( dir ) {

                case 'next' :

                    this.current    = this.$rightItm.index();

                    // current item moves left
                    this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );

                    // right item moves to the center
                    this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') ); 

                    // next item moves to the right
                    if( this.$nextItm ) {

                        // left item moves out
                        this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );

                        this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

                    }
                    else {

                        // left item moves right
                        this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

                    }
                    break;

                case 'prev' :

                    this.current    = this.$leftItm.index();

                    // current item moves right
                    this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );

                    // left item moves to the center
                    this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );

                    // prev item moves to the left
                    if( this.$prevItm ) {

                        // right item moves out
                        this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );

                        this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

                    }
                    else {

                        // right item moves left
                        this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );

                    }
                    break;  

            };

            this._setItems();

            if( !this.supportTrans )
                this.$currentItm.addClass('dg-center');

        },
        _startSlideshow     : function() {

            var _self   = this;

            this.slideshow  = setTimeout( function() {

                _self._navigate( 'next' );

                if( _self.options.autoplay ) {

                    _self._startSlideshow();

                }

            }, this.options.interval );

        },
        destroy             : function() {

            this.$navPrev.off('.gallery');
            this.$navNext.off('.gallery');
            this.$wrapper.off('.gallery');

        }
    };

    var logError            = function( message ) {
        if ( this.console ) {
            console.error( message );
        }
    };

    $.fn.gallery            = function( options ) {

        if ( typeof options === 'string' ) {

            var args = Array.prototype.slice.call( arguments, 1 );

            this.each(function() {

                var instance = $.data( this, 'gallery' );

                if ( !instance ) {
                    logError( "cannot call methods on gallery prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }

                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for gallery instance" );
                    return;
                }

                instance[ options ].apply( instance, args );

            });

        } 
        else {

            this.each(function() {

                var instance = $.data( this, 'gallery' );
                if ( !instance ) {
                    $.data( this, 'gallery', new $.Gallery( options, this ) );
                }
            });

        }

        return this;

    };

})( jQuery );

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 #HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 #HTML / CSS
canvas基础之图形验证码的示例
Jan 02 #HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 #HTML / CSS
You might like
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python字典操作简明总结
2015/04/13 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python制作填词游戏步骤详解
2019/05/05 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python机器学习库xgboost的使用
2020/01/20 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
《夹竹桃》教学反思
2014/04/20 职场文书
朋友聚会开场白
2015/06/01 职场文书
高一军训感想
2015/08/07 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书