點擊旋轉背景圖片

我想要做的是在CSS中點擊圖片時旋轉90度。我檢查了多個網站和帖子，他們都接近我想要的，但似乎並沒有正確工作，所以我想通過發佈我自己的問題。點擊旋轉背景圖片

這是我需要旋轉的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來做到這一點？還是必須以其他方式完成？

編輯：我想我的主要問題是如何使用jquery訪問該圖像並對其進行更改？我試圖改變我聲明圖像的位置（例如在html中），但是這只是弄亂了我要做的事情的外觀。

來源

2013-10-29 Snakeyesz

嘗試使用jQuery插件，如jqueryrotate https://code.google.com/p/jqueryrotate/。

來源

2013-10-29 04:58:43 Huey

這將是偉大的，但我不是蘇我將如何訪問該圖像，以便在其上使用.rotate（）。 – Snakeyesz

如果這是你的圖像：../images./arrow.gif，只需導入插件，然後使用標籤添加你的菜單並添加你想要的任何標識（例如「箭頭」）。然後，只要致電： '$（「＃箭頭」）旋轉（{ 綁定： { 點擊：函數（）{$ （本）.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

點擊旋轉背景圖片

回答

相關問題