Массив с картинками (рулетка) , как сделать все картинки одного размера?

270
20 июня 2018, 13:30

(function($) { 
  $.fn.extend({ 
 
    roulette: function(options) { 
 
      var defaults = { 
        angle: 0, 
        angleOffset: -45, 
        speed: 5000, 
        easing: "easeInOutElastic", 
      };   
 
      var opt = $.extend(defaults, options); 
 
      return this.each(function() { 
        var o = opt; 
 
        var data = [ 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'}, 
          { img: 'url(https://i.kinja-img.com/gawker-media/image/upload/t_original/t9r2n8jiek3touucngxw.png)'} 
        ]; 
 
 
        var $wrap = $(this), 
            $btnStart = $wrap.find("#btn-start"), 
            $roulette = $wrap.find(".roulette"), 
            wrapW = $wrap.width(), 
            angle = o.angle, 
            angleOffset = o.angleOffset, 
            speed = o.speed, 
            esing = o.easing, 
            itemSize = data.length, 
            itemSelector = "item", 
            labelSelector = "label", 
            d = 360 / itemSize, 
            borderTopWidth = wrapW, 
            borderRightWidth = tanDeg(d); 
 
        for(i=1; i<=itemSize; i+=1){ 
          var idx = i-1, 
              rt = i*d + angleOffset, 
              itemHTML = $('<div class="'+ itemSelector +'">'), 
              labelHTML = ''; 
               
 
          $roulette.append(itemHTML); 
          $roulette.children("."+ itemSelector).eq(idx).append(labelHTML); 
          $roulette.children("."+ itemSelector).eq(idx).css({ 
            "left": wrapW / 2, 
            "top": -wrapW / 2, 
            "border-top-width": borderTopWidth, 
            "border-right-width": borderRightWidth, 
            "background-image": data[idx].img, 
            "background-position": "center center", 
            "transform": "rotate("+ rt + "deg)" 
          }); 
 
          var textH = parseInt(((2*Math.PI*wrapW)/d)*.5); 
 
        } 
 
        function tanDeg(deg) { 
          var rad = deg * Math.PI/180; 
          return wrapW / (1/Math.tan(rad)); 
        } 
 
 
        $btnStart.on("click", function() { 
          rotation(); 
        }); 
 
        function rotation() { 
 
          var completeA = 360 * r(5, 10) + r(0, 360); 
 
          $roulette.rotate({ 
            angle: angle, 
            animateTo: completeA, 
            center: ["50%", "50%"], 
            easing: $.easing.esing, 
            callback: function() { 
              var currentA = $(this).getRotateAngle(); 
 
              console.log(currentA); 
 
            }, 
            duration: speed 
          }); 
        } 
 
        function r(min, max) { 
          return Math.floor(Math.random() * (max - min + 1)) + min; 
        } 
 
      }); 
    } 
  }); 
})(jQuery); 
 
$(function() { 
 
  $('.box-roulette').roulette(); 
 
});
html, body, button{ 
	font-family:Arial, "돋움", Dotum, "굴림", Gulim, "Apple SD Gothic Neo", AppleGothic, sans-serif; 
} 
 
button{border:0;margin:0;padding:0;} 
 
.title{margin-top:50px;text-align:center;} 
 
.box-roulette { 
	position:relative; 
	margin:50px auto; 
	width:500px; 
	height:500px; 
	border:10px solid #ccc; 
	border-radius:50%; 
	background:#ccc; 
	overflow:hidden; 
} 
.box-roulette .markers{ 
	position:absolute; 
	left:50%; 
	top:0; 
	margin-left:-25px; 
	width:0; 
	height:0; 
	border:25px solid #fff; 
	border-left-color:transparent; 
	border-right-color:transparent; 
	border-bottom-color:transparent; 
	z-index:9999; 
} 
.box-roulette .roulette{ 
	position:relative; 
	width:100%; 
	height:100%; 
	overflow:hidden; 
} 
.box-roulette .item{ 
	position:absolute; 
	top:0; 
	width:0; 
	height:0; 
	border:0 solid transparent; 
	transform-origin:0 100%; 
} 
.box-roulette .label{ 
	position:absolute; 
	left:0; 
	top:0; 
	color:#fff; 
	white-space:nowrap; 
	transform-origin:0 0; 
} 
.box-roulette .label .text{ 
	display:inline-block; 
	font-size:20px; 
	font-weight:bold; 
	line-height:1; 
	vertical-align:middle; 
} 
 
#btn-start{ 
 
	position:absolute; 
	left:100%;top:50%; 
	margin:-50px 0 0 -50px; 
	width:50px; 
	height:50px; 
	font-weight:bold; 
	background:#fff; 
	border-radius:50px; 
	z-index:9999; 
	cursor:pointer; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 
<script src="https://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script> 
 
 
 
    <p class="title">РУЛЕТКА</p> 
    <div class="box-roulette"> 
    <div class="markers"></div> 
    <button type="button" id="btn-start">   TAP ME 
    </button> 
    <div class="roulette" id="roulette"></div> 
</div>

READ ALSO
Ошибка в консоли js - скрипт работает

Ошибка в консоли js - скрипт работает

(index):22 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experienceFor more help, check https://xhr

212
Возврат суммы значений в массиве [дубликат]

Возврат суммы значений в массиве [дубликат]

На данный вопрос уже ответили:

184
ymaps router или multiRouter

ymaps router или multiRouter

В документации почти все примеры по multiRouterMultiRoute

189
bootstrap-datepicker.как развернуть выбор даты?

bootstrap-datepicker.как развернуть выбор даты?

Есть классический календарь бутстрапВыбирает текущую дату по умолчанию и позволяет выбрать одну из следующих дат

265