点击旋转背景图片

我想要做的是在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

点击旋转背景图片

回答

相关问题