Merhaba arkadaşlar, her projede farklım farklı yazmaktan yoruldum ve burada paylaşıyorum.
Html Kodları
|
|
<div class="rating"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div><!-- /. rating --> |
Css Kodları
|
|
.rating{padding: 10px;} .rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block; text-indent: -9999px; margin: 0 0;} .rating a.selected, .rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;} |
Js Kodları
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
rating(function (e) { $('.callback').html('Selected : 1-' + e); }); function rating(callback) { $('.rating a').on( { mouseover : function () { $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover'); }, mouseout : function () { $('.rating a').removeClass('hover'); }, click : function () { if($('.rating a').hasClass('selected')) { // Alert $('.rating a').removeClass('selected'); } $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover'); typeof callback === 'function' && callback.call( this, ($(this).index() + 1) ); } }); } |
Codepen:
Aycan.net demo -> http://calismalar.aycan.net/rating/
Post Views: 3.439
