我有一个三张卡片的旋转木马,它在Y轴上旋转,因此可以正常工作。 当您单击按钮向上时,它会上升,而当您单击按钮向下时,它会下降,但是我想实现这种功能。 单击顶部卡时,它会上升,而单击底部卡时,它会下降。 我可以选择第一个div,它可以工作,但是当您单击第一个元素时,它变为第二个,依此类推,这是一个问题。如何仅在顶部和底部的元素上触发旋转?
var cards = $("#carousel > .card"), Next, Previous,
nexttransforms =[
{y: '-55%', z: '-50px', scale: 0.8,},
{y: '55%', z: '-50px', scale: 0.8,},
{y: 0, z: 0, scale: 1,},
];
Next = function(){
nexttransforms.push(nexttransforms.shift());
for(i=0; i<cards.length; i++){
var kartica = cards[i];
$(kartica).css({
'transform': 'translateY('+ nexttransforms[i].y +') translateZ(' + nexttransforms[i].z + ') scale(' + nexttransforms[i].scale+')',
});
}
};
Previous = function(){
for(i=0; i<=cards.length-2; i++){
nexttransforms.push(nexttransforms.shift());
}
for(i=0; i<cards.length; i++){
var x = nexttransforms[i];
var kartica = cards[i];
$(kartica).css({'transform': 'translateY('+ x.y +') translateZ(' + x.z + ') scale(' + x.scale+')',
});
}
};
$('#down').on('click', function(){
Previous();
});
$('#up').on('click', function(){
Next();
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
<button id="up">Up</button>
<button id="down">Down</button>
<script src="js/fix.js"></script>
</body>
</html>
#carousel {
position: absolute;
top: 40px;
left: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 1;
}
.card {
position: absolute;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 1s;
background: black;
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
}
.card:nth-child(3) {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
background: #add8e6;
}
.card:nth-child(1) {
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
background: #ff7f50;
}
.card:nth-child(2) {
-webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
transform: translateY(55%) translateZ(-50px) scale(0.8);
background: #7fff00;
}
最终结果是,当您单击顶部的卡片时,它会上升,而当您单击底部的卡片时,它会下降,并且应该无休止地工作。
答案 0 :(得分:1)
$(function(){
$('.card').click(function(e){
e.preventDefault();
var thisCard = $(this);
var topCard = $('.card.top');
var midCard = $('.card.middle');
var botCard = $('.card.bottom');
if (thisCard.hasClass('top'))
{
topCard.removeClass('top').addClass('bottom');
midCard.removeClass('middle').addClass('top');
botCard.removeClass('bottom').addClass('middle');
}
else if (thisCard.hasClass('bottom'))
{
topCard.removeClass('top').addClass('middle');
midCard.removeClass('middle').addClass('bottom');
botCard.removeClass('bottom').addClass('top');
}
});
});
#carousel {
position: absolute;
top: 50px;
left: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 1;
}
.card {
position: absolute;
width: 80px;
height: 80px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 1s;
background: black;
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
}
.card.middle {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
background: #add8e6;
}
.card.top {
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
background: #ff7f50;
}
.card.bottom {
-webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
transform: translateY(55%) translateZ(-50px) scale(0.8);
background: #7fff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
<div class="card top"></div>
<div class="card middle"></div>
<div class="card bottom"></div>
</div>