旋转DIV连续点击

我旋转上点击按钮的圆圈里面，并且还示出了根据活动选项卡的内容。圆圈必须每次旋转72度。我已经完成了360度，但我希望它连续旋转，并根据它显示内容。旋转DIV连续点击

请检查下面的代码 - 我的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;}

来源

2015-02-09 Monica

http://jsfiddle.net/fjd64gwk/2/ – Deshan 2015-02-09 08:03:55

@DeshanR它只是旋转一圈，不显示有效的标签和它的内容。 – Monica 2015-02-09 08:08:25

编辑：正确激活的标签，它的内容是现在显示。我已经更新了你的提琴：http://jsfiddle.net/fjd64gwk/6/

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

我做了什么：补充说，每1全旋增加了timesRotated量。将时间乘以360加上你的角度，你就可以无限旋转。

我也改变了你的第一个“如果”隐藏“Challanges”选项卡，并显示正确的选项卡。

来源

2015-02-09 08:08:37

谢谢！它的工作.. :) – Monica 2015-02-09 09:20:18

旋转DIV连续点击

回答

相关问题