Hover and Click Trigger for Circular Elements with jQuery

Menerapkan a:hover pseudo-class untuk elemen secara luas dikenal sebagai classic “hovering” di atas sebuah elemen pada halaman web. Masalah yang muncul dengan diperkenalkannya properti border-radius. Hal ini menjadi ekstrim ketika kita membuat lingkaran dengan menetapkan batas-radius persegi sampai 50% (setengah dari lebar dan tinggi luarnya).





Hari ini saya ingin berbagi salah satu solusi untuk masalah circle hovering. Kami akan membuat sebuah plugin yang akan mengurus 'mouseenter', 'mouseleave' dan 'klik'.

Cara kerjanya

Dalam contoh kita, kita akan membuat sebuah lingkaran dengan beberapa jenis efek hover. Struktur hanya akan menjadi:
<a href="#" id="circle" class="ec-circle">
    <h3>Hovered</h3>
</a>

CSS

.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(../images/1.jpg) no-repeat center center;
    box-shadow:
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
}
Sekarang, kita akan mendefinisikan sebuah class untuk efek hover tapi bukan pseudo-class :hover yang dinamis. Idenya adalah untuk menerapkan class ini maka dengan jQuery ketika kita memasuki area melingkar dari elemen tsb:
.ec-circle-hover{
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}
Ketika kita memiliki JavaScript yg dinonaktifkan, kita akan menambahkan pseudo-class. CSS Style ini dapat ditemukan di noscript.css:
.ec-circle:hover{
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

JavaScript

$.CircleEventManager            = function( options, element ) {
     
    this.$el            = $( element );
     
    this._init( options );
     
};
 
$.CircleEventManager.defaults   = {
    onMouseEnter    : function() { return false },
    onMouseLeave    : function() { return false },
    onClick         : function() { return false }
};
 
$.CircleEventManager.prototype  = {
    _init               : function( options ) {
         
        this.options        = $.extend( true, {}, $.CircleEventManager.defaults, options );
         
        // set the default cursor on the element
        this.$el.css( 'cursor', 'default' );
         
        this._initEvents();
         
    },
    _initEvents         : function() {
         
        var _self   = this;
         
        this.$el.on({
            'mouseenter.circlemouse'    : function( event ) {
                 
                var el  = $(event.target),
                 
                          circleWidth   = el.outerWidth( true ),
                          circleHeight  = el.outerHeight( true ),
                          circleLeft    = el.offset().left,
                          circleTop     = el.offset().top,
                          circlePos     = {
                              x     : circleLeft + circleWidth / 2,
                              y     : circleTop + circleHeight / 2,
                              radius: circleWidth / 2
                          };
                 
                // save cursor type
                var cursor  = 'default';
                 
                if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
                    cursor = 'pointer';
                     
                el.data( 'cursor', cursor );
                 
                el.on( 'mousemove.circlemouse', function( event ) {
 
                    var distance    = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );
                     
                    if( !Modernizr.borderradius ) {
                         
                        // inside element / circle
                        el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
                        _self.options.onMouseEnter( _self.$el );
                     
                    }
                    else {
                     
                        if( distance <= circlePos.radius && !el.data('inside') ) {
                             
                            // inside element / circle
                            el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
                            _self.options.onMouseEnter( _self.$el );
                             
                        }
                        else if( distance > circlePos.radius && el.data('inside') ) {
                             
                            // inside element / outside circle
                            el.css( 'cursor', 'default' ).data( 'inside', false );
                            _self.options.onMouseLeave( _self.$el );
                         
                        }
                     
                    }
                 
                });
                 
            },
            'mouseleave.circlemouse'    : function( event ) {
                 
                var el  = $(event.target);
     
                el.off('mousemove');
                 
                if( el.data( 'inside' ) ) {
                 
                    el.data( 'inside', false );
                    _self.options.onMouseLeave( _self.$el );
                 
                }
                 
            },
            'click.circlemouse'         : function( event ) {
                 
                // allow the click only when inside the circle
                 
                var el  = $(event.target);
                 
                if( !el.data( 'inside' ) )
                    return false;
                else
                    _self.options.onClick( _self.$el );
                 
            }
        });
         
    },
    destroy             : function() {
     
        this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor');
 
    }
};
Dalam contoh kita akan menerapkan Plugin ke elemen terkait. Dalam masalah ini kita harus menambahkan hover class on ‘mouseenter’ dan removing it on ‘mouseleave’..
$('#circle').circlemouse({
    onMouseEnter    : function( el ) {
     
        el.addClass('ec-circle-hover');
     
    },
    onMouseLeave    : function( el ) {
         
        el.removeClass('ec-circle-hover');
         
    },
    onClick         : function( el ) {
         
        alert('clicked');
         
    }
});
Ingat bahwa “normal” pseudo hover class juga didefinisikan dalam noscript.css yang akan diterapkan ketika JavaScript dinonaktifkan.




Sekian tutorial mengenai Hover and Click Trigger for Circular Elements with jQuery! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!

0 Response to "Hover and Click Trigger for Circular Elements with jQuery"

Post a Comment

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).