javascript - 单击时连续旋转div

Question

我在单击其中的按钮时旋转圆圈，并根据事件选项卡显示内容。 圆必须每次旋转 72 度。 我已经做到了 360 度，但我希望它不断旋转并根据它显示内容。

检查这个http://jsfiddle.net/fjd64gwk/

请检查下面的代码 - 我的 html 代码:

<div class="main_container">
  <div id="pin_wheel">
    <div id="pin_wheel_items">
        <div class="spin_btn"><span class="arrow">SPIN</span></div>
      <div class="left" id="spinCircle">
        <span class="spin_feedback">
            <img src="images/icon-1 speech buble.png" class="default_img" />
            <div style="clear:both"></div>
            <label>Send and Give Feedback</label>
        </span>   
        <span class="spin_success">
            <img src="images/icon-5 success.png" class="default_img"  />
            <div style="clear:both"></div>
            <label>Celebrate The Success Of Others</label>
        </span>
        <span class="spin_challanges">
            <img src="images/icon2 lock.png" class="default_img" />
            <div style="clear:both"></div>
            <label>Seek Challanges</label>
        </span>
        <span class="spin_effort">
            <img src="images/icon 4 tools.png" class="default_img" />
            <div style="clear:both"></div>
            <label>Preserve With Effort</label>
        </span>
        <span class="spin_obstacles">
            <img src="images/icon3 Navigate.png" class="default_img" />
            <div style="clear:both"></div>
            <label>Navigate Obstacles</label>
        </span>
      </div>
      <div class="right">
        <label class="spin_the_wheel">Spin The Wheel</label>
        <div class="info challanges-info">
            <div class="content_right"><label class="label_right">Seek Challenges</label><img class="clip_img" src="images/icon_clip.png"/></div>
            <div class="clearfix"></div>
            <label class="label_heading">Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_img" src="images/icon_Growth-mindset.png" />
            <ul>
                <li>Seeks out challenges</li>
                <li>Questions the status quo</li>
                <li>Takes informed risks</li>
            </ul>
            <hr />
            <label class="label_heading">Inner Voice of a Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
            <p>‘Wow, that’s going to test me. I feel a bit uncertain about what the result will be. But, bring it on.’</p>
            <hr />
            <label class="label_heading">Fixed Mindset</label>
            <div class="clearfix"></div>
            <img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
            <p>Stays away from a new or difficult task for the fear of failure</p>
        </div>

        <div class="info success-info">
            <div class="content_right"><label class="label_right">Celebrate Success of Others</label><img class="clip_img" src="images/icon_clip.png"/></div>
            <div class="clearfix"></div>
            <label class="label_heading">Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_img" src="images/icon_Growth-mindset.png" />
            <ul>
                <li>Looks for inspiration in the success of others</li>
                <li>Models and shares the best practices</li>
            </ul>
            <hr />
            <label class="label_heading">Inner Voice of a Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
            <p>‘It wasn’t my idea, but I love what they’ve done. Kudos to them. I’m going to reach out and see how I can learn from them on my next project.’
            </p>
            <hr />
            <label class="label_heading">Fixed Mindset</label>
            <div class="clearfix"></div>
            <img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
            <p>Resents or dismisses the success of others and hoards information and resources.</p>
        </div>

        <div class="info feedback-info">
            <div class="content_right"><label class="label_right">Seek and Give Feedback</label><img class="clip_img" src="images/icon_clip.png"/></div>
            <div class="clearfix"></div>
            <label class="label_heading">Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_img" src="images/icon_Growth-mindset.png" />
            <ul>
                <li>Seeks and gives constructive feedback</li>
                <li>Value Feedback</li>
            </ul>
            <hr />
            <label class="label_heading">Inner Voice of a Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
            <p>‘This is tough to hear, but I’m going to stay open-minded because I know I’ll learn something.’</p>
            <hr />
            <label class="label_heading">Fixed Mindset</label>
            <div class="clearfix"></div>
            <img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
            <p>Feels insulted by criticism</p>
        </div>

        <div class="info effort-info">
            <div class="content_right"><label class="label_right">Persevere With Effort</label><img class="clip_img" src="images/icon_clip.png"/></div>
            <div class="clearfix"></div>
            <label class="label_heading">Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_img" src="images/icon_Growth-mindset.png" />
            <ul>
                <li>Shows determination and perseverance to get better</li>
            </ul>
            <hr />
            <label class="label_heading">Inner Voice of a Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
            <p>‘Phew, this doesn’t come easily to me, but I’m going to stick it out. I know I’ll get better if I’m persistent.’</p>
            <hr />
            <label class="label_heading">Fixed Mindset</label>
            <div class="clearfix"></div>
            <img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
            <p>Tries to appear effortlessly smart, views hard work as a sign of inability, and gives up when the going gets tough.</p>

        </div>

        <div class="info obstacles-info">
            <div class="content_right"><label class="label_right">Navigate Obstacles</label><img class="clip_img" src="images/icon_clip.png"/></div>
            <div class="clearfix"></div>
            <label class="label_heading">Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_img" src="images/icon_Growth-mindset.png" />
            <ul>
                <li>Reflects on what was learned from mistakes</li>
                <li>Applies  previous learning when formulating new strategies</li>
            </ul>
            <hr />
            <label class="label_heading">Inner Voice of a Growth Mindset</label>
            <div class="clearfix"></div>
            <img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
            <p>‘That didn’t work as I thought it would. How can I approach the problem differently and what can I learn from my first try?’</p>
            <hr />
            <label class="label_heading">Fixed Mindset</label>
            <div class="clearfix"></div>
            <img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
            <p>Hides mistakes and avoids sharing failures</p>
        </div>

      </div>
    </div>

  </div>
</div>

我的脚本:

$(document).ready(function() {

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).animate({
        textIndent: 0
    }, {
        step: function(now, fx) {
            $(this).css({
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                'transform': 'rotate(' + degrees + 'deg)',
                'transition-duration': '2s'
            });
        },
        duration: 'slow'
    }, 'linear');

};



$(".spin_btn").click(function() {
    $(".spin_the_wheel").hide();
    rotation += 72;
    var increaseVal = rotation;
    $("#spinCircle").rotate(rotation);

    if (rotation == 72) { //success
        $(".success-info").show();
        $(".spin_success").addClass("active");
        $(".active").css({
            'background': 'none'
        });
        $(".active").append("<img class='apnd_img' src='./images/green_success.png'><label class='apnd_lbl'>Celebrate The Success Of Others</label>");
    } else if (rotation == 144) { //feedback
        $(".success-info").hide();
        $(".feedback-info").show();
        if (!$(".spin_feedback").find('.apnd_img1').length) {
            $(".spin_success").removeClass('active').css('background-image', 'url(./images/b2.png)');
            $(".spin_success .apnd_img, .spin_success .apnd_lbl").remove();
            $(".spin_feedback").addClass('active');
            $(".active").css({
                'background': 'none'
            });
            $(".active").append("<img class='apnd_img1' src='./images/green_speech-bubble.png'><label class='apnd_lbl1'>Send and Give Feedback</label>");
        }
    } else if (rotation == 216) { //effort
        $(".feedback-info").hide();
        $(".effort-info").show();
        if (!$(".spin_effort").find('.apnd_img2').length) {
            $(".spin_feedback").removeClass('active').css('background-image', 'url(./images/b1.png)');
            $(".spin_feedback .apnd_img1, .spin_feedback .apnd_lbl1").remove();
            $(".spin_effort").addClass('active');
            $(".active").css({
                'background': 'none'
            });
            $(".active").append("<img class='apnd_img2' src='./images/Green_tool.png'><label class='apnd_lbl2'>Preserve With Effort</label>");
        }
    } else if (rotation == 288) { //obstacles
        $(".effort-info").hide();
        $(".obstacles-info").show();
        if (!$(".spin_obstacles").find('.apnd_img3').length) {
            $(".spin_effort").removeClass('active').css('background-image', 'url(./images/b5.png)');
            $(".spin_effort .apnd_img2, .spin_effort .apnd_lbl2").remove();
            $(".spin_obstacles").addClass('active');
            $(".active").css({
                'background': 'none'
            });
            $(".active").append("<img class='apnd_img3' src='./images/green_navigate.png'><label class='apnd_lbl3'>Navigate Obstacles</label>");
        }
    } else { // challanges
        $(".obstacles-info").hide();
        $(".challanges-info").show();
        if (!$(".spin_challanges").find('.apnd_img4').length) {
            $(".spin_obstacles").removeClass('active').css('background-image', 'url(./images/b4.png)');
            $(".spin_obstacles .apnd_img3, .spin_obstacles .apnd_lbl3").remove();
            $(".spin_challanges").addClass('active');
            $(".active").css({
                'background': 'none'
            });
            $(".active").append("<img class='apnd_img4' src='./images/green_lock.png'><label class='apnd_lbl4'>Seek Challanges</label>");
        }
        rotation -= 72
    }

});

});

我的 CSS:

.clearfix{clear:both;}
.main_container {width:1000px;height:600px;}
hr {
    color:#fff;
}
/* Just for positioning the menu correctly */
.main_container #pin_wheel {
    position: relative;
    width: 650px;
    margin: 0px auto;
    top: 100px;
    left: 37px;
}
.main_container #pin_wheel_items {
    width:836px;
    height:416px;
    background-image:url(../images/blue-bg.png);
}
.main_container .spin_btn{
    height:93px;
    width:93px;
    background-image:url(../images/spin_center-circle.png);
    line-height:50px;
    font-weight:bold;
    font-size:16px;
    text-align:center;
    color:#009bbb;
    position: absolute;
    top: 160px;
    left: 25%;
    cursor:pointer;
    z-index: 1;
}
.main_container .arrow{
    width:52px;
    height:47px;
    background-image:url(../images/arrow.png);
    margin: 21px 0 0 21px;
    float: left;
}
.main_container .left{
    margin: 15px 0 0 15px;
    float: left;

}
#pin_wheel_items .left label{
    font-size:16px;
    color:#009bbb;
    float:left;
    width: 124px;
    margin: 8px 0 0 33px;
    text-transform: uppercase;
}
span.spin_challanges label {
    margin: 8px 0 0 66px !important;
}
#pin_wheel_items .right{
    height:416px;
    width: 345px;
    float: left;
    margin: 5px 0 0 24px;
}
#pin_wheel_items .right .spin_the_wheel{
    font-size:36px;
    color:#fff;
    margin: 180px 0 0 30px;
    float: left;
}
.main_container .info{display:none;}
.main_container .spin_challanges, .main_container .spin_obstacles, .main_container .spin_effort,.main_container .spin_feedback,.main_container .spin_success{
    float:left;
    background-repeat: no-repeat;
    text-align: center;
}

.main_container .spin_feedback{
    background-image:url(../images/b1.png);
    width:198px;
    height:190px;
    margin:0;
}
span.spin_feedback img {
margin: 65px 0 0 75px;
}
.main_container .spin_success{
    background-image:url(../images/b2.png);
    width:222px;
    height:198px;
    margin: -9px 0 0 -59px;
}
span.spin_success img {
margin: 31px 0 0 79px;
}
.main_container .spin_challanges{
    background-image:url(../images/b3.png);
    width:199px;
    height:235px;
    margin: 74px 0 0 -160px;
}
span.spin_challanges img {
margin: 80px 0 0 110px;
}
.main_container .spin_obstacles{
    background-image:url(../images/b4.png);
    width:224px;
    height:198px;
    margin: 193px 0 0 -263px;
}
span.spin_obstacles img {
    margin: 63px 0 0 75px;
}
.main_container .spin_effort{
    background-image:url(../images/b5.png);
    width:199px;
    height:191px;
    margin:190px 0 0 -401px;
}
span.spin_effort img {
    margin: 35px 0 0 69px;
}
.left span img {
    float: left;
}
.content_right {
float: right;
}
label.label_right  {
    float: left;
    color: #fff;
    font-size: 14px;
    margin: 8px -13px 30px 0;
}
.clip_img{
    position: absolute;
    right: -29%;
    top: -1px;
}
label.label_heading {
    color: #fff;
    font-size: 24px;
    float: left;
}
.info p, .info ul li {
    color:#fff;
    font-size:12px;
    margin: 0 0 0 15px;
}
.info p{
    padding: 10px 0 15px 0;
}
img.growth_img, img.growth_mindset_img, img.fixed_mindset_img{
    float: left;
    margin: 19px 0 0 2px;
    padding: 0 10px 0 0px;
}
.active .apnd_img{margin:-22px 0 0 -102px !important;-webkit-transform:rotate(-72deg);-moz-transform:rotate(-72deg);    -ms-transform:rotate(-72deg);   transform: rotate(-72deg);}
.active .apnd_lbl{margin: -75px 0 0 62px !important; -webkit-transform:rotate(-72deg);-moz-transform:rotate(-72deg);    -ms-transform:rotate(-72deg);   transform: rotate(-72deg);color:#fff !important;}

.active .apnd_img1{ margin: 22px 0 0 -102px !important; -webkit-transform:rotate(-144deg);  -moz-transform:rotate(-144deg); -ms-transform:rotate(-144deg);  transform: rotate(-144deg);}
.active .apnd_lbl1{ margin: -75px 0 0 41px !important;  -webkit-transform:rotate(-144deg);  -moz-transform:rotate(-144deg); -ms-transform:rotate(-144deg);  transform: rotate(-144deg); color:#fff !important;}

.active .apnd_img2{ margin: 0 0 0 -55px !important; -webkit-transform:rotate(-216deg);  -moz-transform:rotate(-216deg); -ms-transform:rotate(-216deg);  transform: rotate(-216deg);}
.active .apnd_lbl2{ margin: -77px 0 0 30px !important;  -webkit-transform:rotate(-216deg);  -moz-transform:rotate(-216deg); -ms-transform:rotate(-216deg);  transform: rotate(-216deg); color:#fff !important;}

.active .apnd_img3{ margin: -38px 0 0 -50px !important; -webkit-transform:rotate(-288deg);  -moz-transform:rotate(-288deg); -ms-transform:rotate(-288deg);  transform: rotate(-288deg);}
.active .apnd_lbl3{ margin: -58px 0 0 18px !important;  -webkit-transform:rotate(-288deg);  -moz-transform:rotate(-288deg); -ms-transform:rotate(-288deg);  transform: rotate(-288deg); color:#fff !important;}

.active .apnd_img4{ margin: -66px 0 0 -90px !important; -webkit-transform:rotate(-360deg);  -moz-transform:rotate(-360deg); -ms-transform:rotate(-360deg);  transform: rotate(-360deg);}
.active .apnd_lbl4{ margin: -58px 0 0 55px !important;  -webkit-transform:rotate(-360deg);  -moz-transform:rotate(-360deg); -ms-transform:rotate(-360deg);  transform: rotate(-360deg); color:#fff !important;}

Answer 1

编辑: 现在显示正确的事件选项卡及其内容。 我已经更新了你的 fiddle :http://jsfiddle.net/fjd64gwk/6/

var timesRotated = 0;
...
if(rotation == ((timesRotated * 360) + 72)){ //success

我所做的:添加了一个 timesRotated 量，每次完全旋转增加 1。将 timeRotated 乘以 360 度加上您的 Angular ，您将能够无限旋转。

我还更改了您的第一个“如果”以隐藏“挑战”选项卡并显示正确的选项卡。