jquery鼠标悬停图片呈现折叠折纸3D动画特效代码

所属分类：网页特效-图片特效&上传 2023-12-09 01:46:02

9.4K 0 查看评论 (0)

查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：一款鼠标悬停图片上触发3D折叠动画，共集成了4种不同的3D折叠特效：折叠、向上弯曲、向下弯曲、半折叠。

jquery鼠标悬停图片呈现折叠折纸3D动画特效代码（共6个文件）

img
- 5884566609_9731cf0786.jpg
- 5884568609_2fc30c874d.jpg
- 5884569375_f9a773a945.jpg
js
- script.js
css
- style.css

index.html

使用方法

code
source

(function($) {

    $.fn.hoverfold = function(options) {
    
      this.each( function() {
        
            $( this ).children( '.view' ).each( function() {
            
                var $item     = $( this ),
                    img        = $item.children( 'img' ).attr( 'src' ),
                    struct    = '<div class="slice s1">';
                        struct    +='<div class="slice s2">';
                            struct    +='<div class="slice s3">';
                                struct    +='<div class="slice s4">';
                                    struct    +='<div class="slice s5">';
                                    struct    +='</div>';
                                struct    +='</div>';
                            struct    +='</div>';
                        struct    +='</div>';
                    struct    +='</div>';
                    
                var $struct = $( struct );
                
                $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                
            } );
            
        });

    };
        
})(jQuery);

    $(function() {

        $('#grid').hoverfold();

    });

(function($) {

    $.fn.hoverfold = function(options) {
    
      this.each( function() {
        
            $( this ).children( '.view' ).each( function() {
            
                var $item     = $( this ),
                    img        = $item.children( 'img' ).attr( 'src' ),
                    struct    = '<div class="slice s1">';
                        struct    +='<div class="slice s2">';
                            struct    +='<div class="slice s3">';
                                struct    +='<div class="slice s4">';
                                    struct    +='<div class="slice s5">';
                                    struct    +='</div>';
                                struct    +='</div>';
                            struct    +='</div>';
                        struct    +='</div>';
                    struct    +='</div>';
                    
                var $struct = $( struct );
                
                $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
                
            } );
            
        });

    };
        
})(jQuery);

    $(function() {

        $('#grid').hoverfold();

    });

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服