18.01.2018, 03:00
|
 |
Интересующийся
|
|
Регистрация: 08.01.2016
Сообщений: 13
|
|
|
Нужна помощь, подправить скрипт рулетки
Всем привет. Прошу прощения, если тема не в том разделе, вроде это самый подходящий...
В общем, есть скрипт прокрутки изображений https://codepen.io/timnew/pen/gPxKRV в котором, собственно, производится прокрутка изображений и останавливается на нужном.
Мне нужно, чтоб прокрутка производилась не вертикально, а горизонтально и чтоб отображалось не одно изображение, а скажем, 11, а выбранное изображение останавливалось посредине (5 слева, 5 справа и по центру нужное).
Помогите, пожалуйста. Уже несколько месяцев ищу подобное, вроде бы нашёл, но моих познаний в js, к сожалению, мало, чтоб сделать как нужно  |
|
18.01.2018, 03:36
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
|
|
18.01.2018, 11:46
|
|
Интересующийся
|
|
Регистрация: 08.01.2016
Сообщений: 13
|
|
Не совсем то...
здесь генерируются цифры в скрипте, а здесь одно изображение режется на части.
У меня посредством php делается выборка адресов картинок из mysql и генерируется id одного из них, на котором надо остановить прокрутку.
Тот скрипт, ссылку на который я дал в первом посте подходит наиболее всего, но надо чуток переделать... |
|
18.01.2018, 11:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Morty,
... оба скрипта по ссылке подходят под вашу задачу ... чем этот то лучше?
|
|
18.01.2018, 12:44
|
|
Интересующийся
|
|
Регистрация: 08.01.2016
Сообщений: 13
|
|
Сообщение от рони
|
Morty,
... оба скрипта по ссылке подходят под вашу задачу ... чем этот то лучше?
|
Этот лучше тем, что я знаю как вставить туда свои картинки, в первом варианте картинок нет вообще, а во втором варианте берётся одна большая картинка и режется на куски. Мне же надо брать разные изображения.
Вполне вероятно, что можно их изменить под мои нужды, но увы, я не знаю как
Также этот лучше тем, что можно ему передать id элемента на котором нужно остановить прокрутку (по крайней мере это есть изначально), а в тех я не знаю как такое реализовать |
|
18.01.2018, 13:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от Morty
|
|
Также этот лучше тем, что можно ему передать id элемента на котором нужно остановить прокрутку
|
может не id, а индекс? |
|
18.01.2018, 13:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
|
|
18.01.2018, 13:51
|
|
Интересующийся
|
|
Регистрация: 08.01.2016
Сообщений: 13
|
|
|
Сообщение от рони
|
|
может не id, а индекс?
|
Может и индекс...
Суть такова:
php генерирует массив картинок, которые должны прокручиваться в рулетке, php функция (с учётом шанса на выпадение и общего числа элементов) определяет выигрышный элемент.
После этого нужно в рулетке прокрутить массив картинок и остановить рулетку на заданном изображении.
Именно поэтому тот скрипт, ссылку на который я указал в первом сообщении, подходит лучше других.
Я нажимаю на кнопку, отправляется запрос в php-скрипт, который выдаёт массив картинок и номер-победитель, после того, как данные получены - запускается рулетка.
Но, как я сказал выше, мне надо чтоб прокрутка производилась горизонтально и выводилось 11 изображений (хотя можно и 5), а картинка-победитель останавливалась посредине... |
|
18.01.2018, 15:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
горизонтальная рулетка упрощённый вариант
Morty,
если хотите иметь тоже самое, но в виде исправленной версии плагина, ваши предложения в личку, но и это достаточно рабочая версия, можно использовать.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{
position:relative;
}
.roulette-inner img{
width:72px;
height:72px;
margin:2px;
}
.roulette-inner img.active{
border:2px solid rgba(89,0,153,.2);
box-sizing:border-box;
border-radius:50%;
padding:-4px 4px 2px 4px;
transform:scale(1.7);
z-index:1000;
background-color:rgba(0,255,127,.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
$(function() {
var option = {
speed: 6,
duration: 3,
stopImageNumber: 4
};
$("#go").click(function() {
option.stopImageNumber = Math.random() * 11|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: 0
}).animate({
left: 844 * option.speed + 75 * (option.stopImageNumber + 6)
}, {
duration: option.duration * 1000,
easing: "easeOutCirc",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + a % 844 + "px)");
},
complete: function() {
$(".roulette-inner img").eq(option.stopImageNumber + (option.stopImageNumber < 6) * 11).addClass("active");
}
});
})
});
</script>
</head>
<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette" style="overflow: hidden; height: 126px; width: 844px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 7000px;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/star.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/flower.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/coin.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/mshroom.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/chomp.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/206/PNG/128/Flower_-_Fire_24653.png" style="display: block; float: left;">
<img src="http://img.informer.com/icons_mac/png/128/218/218340.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/249/PNG/128/Lamp_27000.png" style="display: block; float: left;">
<img src="http://www.iconninja.com/files/817/63/651/orange-monster-icon.png" style="display: block; float: left;">
<img src="http://www.fsiv.com/public/images/logo-share/green/logo8.png" style="display: block; float: left;">
<img src="http://wiki.tockdom.com/w/images/3/36/Piranha_Plant_Cup.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/star.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/flower.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/coin.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/mshroom.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/chomp.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/206/PNG/128/Flower_-_Fire_24653.png" style="display: block; float: left;">
<img src="http://img.informer.com/icons_mac/png/128/218/218340.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/249/PNG/128/Lamp_27000.png" style="display: block; float: left;">
<img src="http://www.iconninja.com/files/817/63/651/orange-monster-icon.png" style="display: block; float: left;">
<img src="http://www.fsiv.com/public/images/logo-share/green/logo8.png" style="display: block; float: left;">
<img src="http://wiki.tockdom.com/w/images/3/36/Piranha_Plant_Cup.png" style="display: block; float: left;">
</div>
</div>
<button id="go">Go</button>
</body>
</html>
|
|
18.01.2018, 16:10
|
|
Интересующийся
|
|
Регистрация: 08.01.2016
Сообщений: 13
|
|
Поковырял немного скрипт, получилось сделать отображение картинок по горизонтали и прокрутку по горизонтали, однако есть косяки. Изображения не зацикливаются и прокрутка не останавливается...
(function($){
var Roulette = function(options){
var defaultSettings={
maxPlayCount:null,
speed:10,
stopImageNumber:null,
rollCount:3,
duration:3,
stopCallback:function(){},
startCallback:function(){},
slowDownCallback:function(){}
};
var defaultProperty={
playCount:0,
$rouletteTarget:null,
imageCount:null,
$images:null,
originalStopImageNumber:null,
totalHeight:null,
topPosition:0,
leftPosition:0,
maxDistance:null,
slowDownStartDistance:null,
isRunUp:true,
isSlowdown:false,
isStop:false,
distance:0,
runUpDistance:null,
isIE:navigator.userAgent.toLowerCase().indexOf("msie")>-1
};
var p=$.extend({},defaultSettings,options,defaultProperty);
var reset=function(){
p.maxDistance=defaultProperty.maxDistance;
p.slowDownStartDistance=defaultProperty.slowDownStartDistance;
p.distance=defaultProperty.distance;
p.isRunUp=defaultProperty.isRunUp;
p.isSlowdown=defaultProperty.isSlowdown;
p.isStop=defaultProperty.isStop;
// p.topPosition=defaultProperty.topPosition
p.leftPosition=defaultProperty.leftPosition
};
var slowDownSetup=function(){
if(p.isSlowdown){return}
p.slowDownCallback();
p.isSlowdown=true;
p.slowDownStartDistance=p.distance;
p.maxDistance=p.distance+2*p.totalHeight;
// p.maxDistance+=p.imageHeight-p.topPosition%p.imageHeight;
p.maxDistance+=p.imageWidth-p.leftpPosition%p.imageWidth;
if(p.stopImageNumber!=null) {
// p.maxDistance+=(p.totalHeight-p.maxDistance%p.totalHeight+p.stopImageNumber*p.imageHeight)%p.totalHeight}
p.maxDistance+=(p.totalWidth-p.maxDistance%p.totalWidth+p.stopImageNumber*p.imageWidth)%p.totalWidth}
};
var roll=function(){
var speed_=p.speed;
if(p.isRunUp){
if(p.distance<=p.runUpDistance) {
var rate_=~~(p.distance/p.runUpDistance*p.speed);
speed_=rate_+1
} else {
p.isRunUp=false
}
} else if (p.isSlowdown) {
var rate_=~~((p.maxDistance-p.distance)/(p.maxDistance-p.slowDownStartDistance)*p.speed);
speed_=rate_+1
}
if (p.maxDistance&&p.distance>=p.maxDistance) {
p.isStop=true;reset();
p.stopCallback(p.$rouletteTarget.find("img").eq(p.stopImageNumber));
return
}
p.distance+=speed_;
// p.topPosition+=speed_;
p.leftPosition+=speed_;
// if (p.topPosition>=p.totalHeight) {
if (p.leftPosition>=p.totalWidth) {
// p.topPosition=p.topPosition-p.totalHeight
p.leftPosition=p.leftPosition-p.totalWidth
}
if (p.isIE) {
// p.$rouletteTarget.css("top","-"+p.topPosition+"px")
p.$rouletteTarget.css("left","-"+p.leftPosition+"px")
}
else {
// p.$rouletteTarget.css("transform","translate(0px, -"+p.topPosition+"px)")
p.$rouletteTarget.css("transform","translate(-"+p.leftPosition+"px, 0px)")
}
setTimeout(roll,1)
};
var init=function($roulette){
$roulette.css({overflow:"hidden"});
defaultProperty.originalStopImageNumber=p.stopImageNumber;
if (!p.$images) {
p.$images=$roulette.find("img").remove();
p.imageCount=p.$images.length;
p.$images.eq(0).bind("load",function(){
// p.imageHeight=$(this).height();
p.imageWidth=$(this).width();
// $roulette.css({height:p.imageHeight+"px"});
$roulette.css({height:p.imageWidth+"px"});
$roulette.css({width:p.imageWidth*6+"px"});
// p.totalHeight=p.imageCount*p.imageHeight;
p.totalWidth=p.imageCount*p.imageWidth;
// p.runUpDistance=2*p.imageHeight}
p.runUpDistance=2*p.imageWidth}
).each(function(){
if (this.complete||this.complete===undefined) {
var src=this.src;
this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
this.src=src
}
})
}
$roulette.find("div").remove();
// p.$images.css({display:"block"});
// p.$rouletteTarget=$("<div>").css({position:"relative",top:"0"}).attr("class","roulette-inner");
p.$rouletteTarget=$("<div>").css({position:"relative",left:"0"}).attr("class","roulette-inner");
$roulette.append(p.$rouletteTarget);
p.$rouletteTarget.append(p.$images);
p.$rouletteTarget.append(p.$images.eq(0).clone());
$roulette.show()
};
var start=function() {
p.playCount++;
if (p.maxPlayCount&&p.playCount>p.maxPlayCount){return}
p.stopImageNumber=$.isNumeric(defaultProperty.originalStopImageNumber)&&Number(defaultProperty.originalStopImageNumber)>=0?Number(defaultProperty.originalStopImageNumber):Math.floor(Math.random()*p.imageCount);
p.startCallback();
roll();
setTimeout(function(){slowDownSetup()},p.duration*1e3)
};
var stop=function(option) {
if(!p.isSlowdown){
if(option) {
var stopImageNumber=Number(option.stopImageNumber);
if (0<=stopImageNumber&&stopImageNumber<=p.imageCount-1) {
p.stopImageNumber=option.stopImageNumber
}
}
slowDownSetup()
}
};
var option=function(options){
p=$.extend(p,options);
p.speed=Number(p.speed);
p.duration=Number(p.duration);
p.duration=p.duration>1?p.duration-1:1;
defaultProperty.originalStopImageNumber=options.stopImageNumber
};
var ret={start:start,stop:stop,init:init,option:option};return ret};
var pluginName="roulette";
$.fn[pluginName]=function(method,options){
return this.each(function(){
var self=$(this);
var roulette=self.data("plugin_"+pluginName);
if(roulette) {
if (roulette[method]) {roulette[method](options)}
else {console&&console.error("Method "+method+" does not exist on jQuery.roulette")}
}
else{
roulette=new Roulette(method);
roulette.init(self,method);
$(this).data("plugin_"+pluginName,roulette)
}
})
}
})(jQuery);
var option = {
speed : 3,
duration : 3,
stopImageNumber : 0
}
var count = $('div.roulette').children().length
$('div.roulette').roulette(option);
$('#go').click(function() {
//option.stopImageNumber = (Math.random() * count) >> 0;
option.stopImageNumber = '2';
$('#config').text(JSON.stringify(option))
$('div.roulette')
.roulette('option', option)
.roulette('start');
})
Как тут вставлять спойлер?..
|
|
|
|
