Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Jquery使用项目旋转跟踪_Javascript_Jquery - Fatal编程技术网

Javascript Jquery使用项目旋转跟踪

Javascript Jquery使用项目旋转跟踪,javascript,jquery,Javascript,Jquery,我在网上创建了一些不错的旋转轨迹,一切都很完美,但唯一的问题是如何获得选定的卡数据id? 我尝试了很多解决方案,但搜索失败,因为我无法定义所选的卡,因为在旋转之后,我想搜索数据库并获取该卡的信息 var$cardList=$('.cardList').first(), $cards=$(“.card”), 宽度=100, 随机化=真, 距离=20*宽度; 对于(变量i=0;i

我在网上创建了一些不错的旋转轨迹,一切都很完美,但唯一的问题是如何获得选定的卡数据id? 我尝试了很多解决方案,但搜索失败,因为我无法定义所选的卡,因为在旋转之后,我想搜索数据库并获取该卡的信息

var$cardList=$('.cardList').first(),
$cards=$(“.card”),
宽度=100,
随机化=真,
距离=20*宽度;
对于(变量i=0;i<50;i++){
$cards.clone().appendTo($cardList);
}
函数自旋(){
var newMargin=0,
newDistance=距离,
速度=5000;
如果(随机){
newDistance=Math.floor(Math.random()*$cards.length*5);
newDistance+=$cards.length*5;
新距离*=宽度;
}
newMargin=-(newDistance);
$cards.first().animate({
marginLeft:newMargin
},速度);
}
$('#spin')。单击(函数(){
$cards.first().css('margin-left',0);
自旋();
返回false;
});
*{
框大小:边框框;
填充:0;
保证金:0;
}
.卡片列表{
高度:100px;
宽度:302px;
位置:相对位置;
利润率:10px;
边框:1px实心#33e;
溢出:隐藏;
空白:nowrap;
}
.卡片{
显示:内联块;
文本对齐:居中;
高度:100px;
宽度:100px;
线高:100px;
背景色:#99e;
字体系列:monospace;
字号:2em;
颜色:#444;
左边框:1px实心#33e;
右边框:1px实心#33e;
}
.cardList::之前,
.cardList::之后{
内容:'';
显示:块;
z指数:100;
宽度:0px;
高度:0px;
转化:translateX(-50%);
左边框:8px实心透明;
右边框:8px实心透明;
}
.cardList::之前{
位置:绝对位置;
顶部:0px;
左:50%;
边框顶部:12px实心#33e;
}
.cardList::之后{
位置:绝对位置;
底部:0px;
左:50%;
边框底部:12px实心#33e;
}
控制部,
钮扣{
利润率:10px;
填充:8px;
字体系列:monospace;
}
分区控制输入{
宽度:48px;
填充:2px;
文本对齐:居中;
字体系列:monospace;
}

1.
2.
3.
4.
5.
6.
7.
8.

旋转
你甚至可以在旋转器启动之前知道答案。到目前为止,这似乎没有任何失败的猜测

var numCardsPassed=newDistance/100
这里,我取生成的距离除以一张牌的宽度,得到将洗牌的牌数

var-answer=Math.floor(起始索引+(numCardsPassed%$cards.length))
在这里,我计算出在经历了8次卡片轮换之后,它将落在哪张卡片上(从索引/卡片2开始)

这种方法最酷的一点是,你可以在卡片洗牌时从数据库中提取数据,这意味着你可以在动画完成时立即显示数据

//箭头开始的卡,在本例中为卡2
常数起始指数=2;
var$cardList=$('.cardList').first(),
$cards=$(“.card”),
宽度=100,
随机化=真,
距离=20*宽度;
对于(变量i=0;i<50;i++){
$cards.clone().appendTo($cardList);
}
函数自旋(){
var newMargin=0,
newDistance=距离,
速度=5000;
如果(随机){
newDistance=Math.floor(Math.random()*$cards.length*5);
newDistance+=$cards.length*5;
新距离*=宽度;
}
var numCardsPassed=newDistance/100;
var answer=Math.floor(起始索引+(numCardsPassed%$cards.length));
console.log(“应答:+Answer”);
newMargin=-(newDistance);
$cards.first().animate({
marginLeft:newMargin
},速度,功能(){
log(“动画完成”);
});
}
$('#spin')。单击(函数(){
$cards.first().css('margin-left',0);
自旋();
返回false;
});
*{
框大小:边框框;
填充:0;
保证金:0;
}
.卡片列表{
高度:100px;
宽度:302px;
位置:相对位置;
利润率:10px;
边框:1px实心#33e;
溢出:隐藏;
空白:nowrap;
}
.卡片{
显示:内联块;
文本对齐:居中;
高度:100px;
宽度:100px;
线高:100px;
背景色:#99e;
字体系列:monospace;
字号:2em;
颜色:#444;
左边框:1px实心#33e;
右边框:1px实心#33e;
}
.cardList::之前,
.cardList::之后{
内容:'';
显示:块;
z指数:100;
宽度:0px;
高度:0px;
转化:translateX(-50%);
左边框:8px实心透明;
右边框:8px实心透明;
}
.cardList::之前{
位置:绝对位置;
顶部:0px;
左:50%;
边框顶部:12px实心#33e;
}
.cardList::之后{
位置:绝对位置;
底部:0px;
左:50%;
边框底部:12px实心#33e;
}
控制部,
钮扣{
利润率:10px;
填充:8px;
字体系列:monospace;
}
分区控制输入{
宽度:48px;
填充:2px;
文本对齐:居中;
字体系列:monospace;
}

1.
2.
3.
4.
5.
6.
7.
8.

旋转
此简单操作可移动项目。我没有看到任何指示“所选”卡的内容。没有任何类别被添加到任何特定卡。您正在寻找添加该功能?是的,我无法确定如何获得旋转结果(数据id),我看不到使用此特定代码实现该功能的方法。它创建了卡的克隆,所以你可能会得到400多张卡,无法正确选择一张唯一的卡。我怀疑它只需要在适当的位置旋转卡片,并在迭代时添加类。你是在寻找随机选择吗?是的,就是这样,只需显示一些div,然后点击按钮旋转整行,然后被选中,除此之外什么都没有,“被选中”是什么意思?通常是指当用户单击/选择某个项目时。旋转后,它以随机数停止。你在打被选中的那个号码吗?或者用户应该点击它?非常感谢这很好,只需在多次旋转后再问一个问题他总是从同一个数字开始滚动是否有解决方案设置为从以前选择的数字滚动?抱歉,一个m