클릭시 배경 이미지 회전

클릭하면 90도 회전하는 CSS 이미지가 표시됩니다. 나는 여러 사이트와 게시물을 확인했습니다. 그리고 그들은 모두 내가 원하는 것에 가깝지만 제대로 작동하지 않는 것 같아요. 그래서 ID는 내 자신의 질문을 게시합니다. 클릭시 배경 이미지 회전

이

는 기본적으로 난 그냥도 아래로 떨어지는 목록을 가지고 있기 때문에 클릭 할 때 아래로 회전 할 내가 회전 URL (../ images./arrow.gif)

.collapsing { 
background: #000 url(../images/arrow.gif) no-repeat 10px .7em; 
font: bold 1.4em 'Trebuchet MS', Arial, Sans-serif; 
padding: 7px 0 7px 35px; 
color: #A0080D; 
cursor: pointer; 
}

을 필요로하는 이미지입니다. 그리고 나는 다시 클릭 할 때 다시 돌아가고 싶다.

<div class="sidebox"> 
    <h1 class="collapsing">Current Projects</h1> 
    <ul class="sidemenu"> 
     <li><a href="index.html" class="top">Website</a></li> 
     <li><a href="#Paper">Technical Reporting Paper</a></li> 
     <li><a href="#Calander">Build Calander for Site</a></li> 
     <!-- <li><a href="">Develop App</a></li> --> 
    </ul> 
</div>

누구든지 Jquery를 사용하여이를 수행하는 방법을 알고 있습니까? 아니면 다른 방법으로해야합니까?

EDIT : 내 주요 문제는 jquery를 사용하여 이미지에 액세스하고 이미지를 변경하는 방법입니다. 나는 이미지를 선언하는 곳 (예 : html)을 변경하려고 시도했지만, 이는 내가하려는 것에 대한 모양을 엉망으로 만든다.

출처

2013-10-29 Snakeyesz

jqueryrotate https://code.google.com/p/jqueryrotate/과 같은 jQuery 플러그인을 사용해보세요.

출처

2013-10-29 04:58:43 Huey

그건 좋겠지 만 나는 su가 아니야. 어떻게 처음에 .rotate()를 사용하기 위해 이미지에 접근 할 것인가? – Snakeyesz

이미지가 ../images./arrow.gif 인 경우 플러그인을 가져온 다음 태그에 원하는 ID (예 : "화살표")를 사용하여 메뉴를 추가하기 만하면됩니다. 다음, 단지 전화 : '$ ("# 화살표"() { 바인드 회전 :. { 클릭 : 함수() { $ (이) .rotate ({각도 : 0, animateTo : (180)는 완화 : $ .easing.easeInOutExpo}) } } }); 내 답변 [link] (https://code.google.com/p/jqueryrotate/wiki/)에서 제공 한 링크의 예를 보겠습니다. 예) – Huey

내가 img 태그에 던져야 할지도 모르겠다는 생각이 들었다. 처음에는 내가보기에 마음에 들지 않았고 img 태그가 없으면 그냥보고 싶었 기 때문에 처음에는하지 않으려 고 노력했다. 조금 더 CSS를 사용하여 제대로 보이도록 만들었지 만 결국에는 모든 것이 잘 풀렸다. 감사 – Snakeyesz

배경 이미지가이 일

$(document).ready(function(){ 
     $('.menu-category-title').click(function(){ 
      var elem = $('#menu-'+$(this).attr('hook')), 
       arrow = $(this).children('.menu-title-arrow') 

      if (!elem.is(':visible')) { 
       arrow.rotate({animateTo:90}); 
      } else { 
       arrow.rotate({animateTo:90}); 
      } 
      elem.fadeToggle('slow', function() { 
      }); 

     return false; 
    }); 
});

당신 HTML 의지가 나는 이것이 당신에게 안부 도움이되기를 바랍니다

<div class="menu-category-title" hook="01">TITLE 01 
     <div class="menu-title-arrow" style="float: right;">↓</div> 
    </div> 

    <div class="menu-food-wrap" id="menu-01"> 
     test 
    </div> 

    <div class="menu-category-title" hook="02">TITLE 02 
     <div class="menu-title-arrow" style="float: right;">↓</div> 
    </div> 

    <div class="menu-food-wrap" id="menu-02"> 
     test 
    </div> 

    <div class="menu-category-title" hook="03">TITLE 03 
     <div class="menu-title-arrow" style="float: right;">↓</div> 
    </div> 

    <div class="menu-food-wrap" id="menu-03"> 
     test 
    </div> 

    <div class="menu-category-title" hook="04">TITLE 04 
     <div class="menu-title-arrow" style="float: right;">↓</div> 
    </div> 

    <div class="menu-food-wrap" id="menu-04"> 
     test 
    </div>

처럼 CSS는

.menu-category-title { 
    position: relative; 
    height: 70px; 
    line-height: 70px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 20px; 
    border-bottom: 1px solid black; 
    cursor: pointer; 
} 

.menu-food-wrap { 
    position: relative; 
    margin-top: 25px; 
    padding-bottom: 45px; 
    text-transform: uppercase; 
    font-size: 12px; line-height: 15px; 
    border-bottom: 1px solid black; 
    display: none; 
}

보이는 시도 오히려 회전보다 ... :)

출처

2013-10-29 05:01:07

클릭시 배경 이미지 회전

답변

관련 문제