Menerapkan
Hari ini saya ingin berbagi salah satu solusi untuk masalah
Cara kerjanya
Dalam contoh kita, kita akan membuat sebuah lingkaran dengan beberapa jenis efek hover. Struktur hanya akan menjadi:
Sekian tutorial mengenai Hover and Click Trigger for Circular Elements with jQuery! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!
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{Sekarang, kita akan mendefinisikan sebuah
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;
}
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{Ketika kita memiliki JavaScript yg dinonaktifkan, kita akan menambahkan pseudo-class. CSS Style ini dapat ditemukan di noscript.css:
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);
}
.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 ) {Dalam contoh kita akan menerapkan Plugin ke elemen terkait. Dalam masalah ini kita harus menambahkan hover class on ‘mouseenter’ dan removing it on ‘mouseleave’..
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');
}
};
$('#circle').circlemouse({Ingat bahwa “normal” pseudo hover class juga didefinisikan dalam noscript.css yang akan diterapkan ketika JavaScript dinonaktifkan.
onMouseEnter : function( el ) {
el.addClass('ec-circle-hover');
},
onMouseLeave : function( el ) {
el.removeClass('ec-circle-hover');
},
onClick : function( el ) {
alert('clicked');
}
});
Sekian tutorial mengenai Hover and Click Trigger for Circular Elements with jQuery! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!
0 comments:
Post a Comment