Question

我已经为旋转木马创建了一个原型，其功能类似于流行的“封面流”交互，但不是照片幻灯片，它将与div中的html一起使用来描述流程中的步骤。我正在使用Greensock TweenMax库。

除了缩放问题外，它们都很有效。当每个步骤到达前面时，它应该扩展为最大的，但它不能正常工作。显然我在某处犯了错误。

这是一个小提琴：http://jsfiddle.net/MaureenDunlap/SjJLQ/

此外，可能有一种更简单的方法来“模板化”，以便将来添加更多步骤。目前我已经为卡片分配了CSS位置，但可能没有必要。

建议欢迎。

<!DOCTYPE html><html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Carousel Steps</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<link rel="stylesheet" href="style-js.css"></link>
</head>
<body style="margin:0;padding:0;">
<div id="Stage">
    <div id="Stage_navigation">
        <div id="Stage_btn1" class="Stage_btn" >
            <div class="button_holder" >
                <div class="nav_button">
                </div>
            </div>
            <div class="nav_button_label">
                1
            </div>
        </div>
        <div id="Stage_btn2" class="Stage_btn">
            <div class="button_holder">
                <div class="nav_button">
                </div>
            </div>
            <div class="nav_button_label">
                2
            </div>
        </div>
            <div id="Stage_btn3" class="Stage_btn">
            <div class="button_holder">
                <div class="nav_button">
                </div>
            </div>
            <div class="nav_button_label">
                3
            </div>
        </div>
            <div id="Stage_btn4" class="Stage_btn">
            <div class="button_holder">
                <div class="nav_button">
                </div>
            </div>
            <div class="nav_button_label">
                4
            </div>
        </div>
            <div id="Stage_btn5" class="Stage_btn">
            <div class="button_holder">
                <div class="nav_button">
                </div>
            </div>
            <div class="nav_button_label">
                5
            </div>
        </div>
    </div>
    <div id="Stage_steps" class="Stage_steps">
        <div id="Stage_step_four" class="pos3b">
            <div class="step_container">
                <div class="rectangle">
                </div>
            </div>
            <div class="item_text">
                Step 4
            </div>
        </div>
        <div id="Stage_step_three" class="pos3a">
        <div class="step_container">
                <div class="rectangle">
                </div>
            </div>
            <div class="item_text">
                Step 3
            </div>
        </div>
        <div id="Stage_step_five" class="pos2b">
            <div class="step_container">
                <div class="rectangle">
                </div>
            </div>
            <div class="item_text">
                Step 5
            </div>
        </div>

        <div id="Stage_step_two" class="pos2a">
            <div class="step_container">
                <div class="rectangle">
                </div>
            </div>
            <div class="item_text">
                Step 2
            </div>
        </div>
        <div id="Stage_step_one" class="pos1" >
            <div class="step_container">
                <div class="rectangle">
                </div>
            </div>
            <div class="item_text">
                Step 1
            </div>
            </div>
        </div>
    </div>
<script>
    var b1 = document.getElementById("Stage_btn1");
    var b2 = document.getElementById("Stage_btn2");
    var b3 = document.getElementById("Stage_btn3");
    var b4 = document.getElementById("Stage_btn4");
    var b5 = document.getElementById("Stage_btn5");
    var s1 = document.getElementById("Stage_step_one");
    var s2 = document.getElementById("Stage_step_two");
    var s3 = document.getElementById("Stage_step_three");
    var s4 = document.getElementById("Stage_step_four");
    var s5 = document.getElementById("Stage_step_five");

$(b1).click(function(){
    TweenLite.to(s1, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
    TweenLite.to(s2, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
    TweenLite.to(s3, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s4, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s5, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
   });
$(b2).click(function(){
    TweenLite.to(s2, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
    TweenLite.to(s3, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
    TweenLite.to(s4, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s5, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s1, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
    });
$(b3).click(function(){
    TweenLite.to(s3, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
    TweenLite.to(s4, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
    TweenLite.to(s5, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s1, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s2, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
    });
$(b4).click(function(){
    TweenLite.to(s4, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
    TweenLite.to(s5, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
    TweenLite.to(s1, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s2, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s3, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
    });
$(b5).click(function(){
    TweenLite.to(s5, 2, {zIndex:500, position:"absolute", scale:(1,1), left:"0px", top:"0px", ease:Power4.easeOut});
    TweenLite.to(s1, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
    TweenLite.to(s2, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s3, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
    TweenLite.to(s4, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
    });
</script>
</body>
</html>

这是CSS

body, html{
    font-family: Arial, Helvetica, sans-serif;
}
#Stage{
    position: relative; 
    -webkit-transform: translateZ(0); 
    background-color: rgb(255, 255, 255); 
    width: 950px; 
    height: 500px; 
    overflow: hidden;
}

/*  NAVIGATION BUTTONS  */

#Stage_navigation{
    position: absolute; 
    margin: 0px; 
    left: 338px; 
    top: 456px; 
    width: 300px; 
    height: 32px; 
    right: auto; 
    bottom: auto; 
    cursor: pointer; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.Stage_btn{
    position: relative; 
    margin: 0px; 
    left: 0px; 
    top: 0px; 
    margin-left:20px;
    width: 34px; 
    height: 32px; 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display:inline-block;
}
.nav_button{
    position: absolute; 
    margin: 0px; 
    left: 0px; 
    top: 0px; 
    width: 34px; 
    height: 32px; 
    right: auto; 
    bottom: auto; 
    border-top-left-radius: 50%; 
    border-top-right-radius: 50%; 
    border-bottom-right-radius: 50%; 
    border-bottom-left-radius: 50%; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(192, 192, 192); 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav_button_label{
    position: absolute; 
    margin: 0px; 
    left: 12px; 
    top: 7px; 
    width: auto; 
    height: auto; 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
    font-size: 20px; color: rgb(0, 0, 0); 
    font-weight: normal; 
    text-decoration: none; 
    font-style: normal; 
    text-align: center
}

/*  CONTENT PANELS  */

.Stage_steps{
    position: absolute; 
    margin: 0px; 
    left: 279px; 
    top: 28px; 
    width: 402px; 
    height: 415px; 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.step_container{
    position: absolute; 
    margin: 0px; 
    left: 0px; 
    top: 0px; 
    width: 402px; 
    height: 415px; 
    right: auto; 
    bottom: auto; 

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-transform: translate(-55px, -56px) translateZ(0px) rotate(0deg) scale(0.72651, 0.72651); 
    -webkit-transform-style: preserve-3d;
}
.rectangle{
    position: absolute; 
    margin: 0px; 
    left: 0px; 
    top: 0px; 
    width: 496px; 
    height: 415px; 
    right: auto; 
    bottom: auto; 
    text-align: center;


    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: translate(-47px, 0px) translateZ(0px) rotate(0deg)
}
.item_text{
    position: absolute; 
    margin: 0px; 
    left: 99px; 
    top: 54px; 
    width: 80px; 
    height: auto; 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    font-size: 20px;
    color: rgb(0, 0, 0); 
    font-weight: normal; 
    text-decoration: none; 
    font-style: normal; 
    text-align: center;
}
.pos1{
    position: absolute; 
    margin: 0px; 
    left: 0px; 
    top: 0px; 
    width: 402px; 
    height: 415px; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(223, 223, 223); 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-transform: translateZ(0);
    scale:(1,1);

}
.pos2a{
    position: absolute; 
    margin: 0px; 
    left: -132px; 
    top: 31px; 
    width: 332px; 
    height: 343px; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(223, 223, 223); 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scale:(0.82581,0.82581);

}
.pos2b{
    position: absolute; 
    margin: 0px; 
    left: 200px; 
    top: 31px; 
    width: 332px; 
    height: 343px; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(223, 223, 223); 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scale:(0.82581,0.82581);

}
.pos3a{
    position: absolute; 
    margin: 0px; 
    left: -210px; 
    top: 51px; 
    width: 292px; 
    height: 302px; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(223, 223, 223); 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scale:(0.72651, 0.72651);
}
.pos3b{
    position: absolute; 
    margin: 0px; 
    left: 320px; 
    top: 51px; 
    width: 292px; 
    height: 302px; 
    border: 1px solid rgb(0, 0, 0); 
    background-color: rgb(223, 223, 223); 
    right: auto; 
    bottom: auto; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scale:(0.72651, 0.72651);

}

Answer 1

问题出在你的数学上。为了显示：如果将项目缩小到80％，则需要将其缩放125％才能恢复到原始大小。因此，当你缩放到'1'时，你实际上是在说“ 1 x当前大小”

Answer 2

我发现了一堆错误。在我的CSS中，我误用了scale属性，需要把它作为“转换”的一部分。

此外，我需要从pos1，pos2a等声明中取出尺寸，并让缩放处理尺寸。

无论如何，这是固定版本。

http://maureendunlap.com/vif/carousel.html

感谢您的帮助！

使用CSS动画缩放问题

2 个答案: