Question

我有一张箭头的图片，它指向右边，这就是图像的来源。但是，图片应该朝下，我做得正确。我想要做的是当用户点击图像时，让箭头指向上方（逆时针旋转180度）。

<img class="moreIndicator rot90" src="img/more.png" alt="More Content"/>

此元素有两个类。＆＃34; moreIndicator＆＃34;和＆＃34; rot90＆＃34;是两个单独的类。这就是我对那些人的看法。

.moreIndicator {
    display: block;
    height: 50px;
    width: 50px;
    position: relative;
     margin-left: auto;
    margin-right: auto;
    z-index: 3;
    opacity: .8;
    top: 0px;


}

上面的代码只是用于将其集中在页面上。

这是90度代码的旋转：

.rot90 {@-moz-keyframes spin { 100% { -moz-transform: rotate(90deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(90deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

上面的代码正确用于将图片向下旋转90度。这是.rot180代码：

.rot180 {@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }
-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

当我点击图片时，我尝试编写各种Javascript代码以使其旋转以使箭头从指向下方位置开始向上。我该怎么办？

Answer 1

那样的东西？

//Stack Operation
#include <cmath>
#include <cstdio>
#include <vector>
#include <iostream>
#include <algorithm>
using namespace std;
int main()
{
vector<int> stack;
vector<int>::iterator it;
int maxptr=-1;
it=stack.begin();
int n;
cin>>n;
for(int i=0,q,x,c=0,count;i<n;i++)
{
    cin>>q;
    if(q==1)
    {
        cin>>x;
        stack.push_back(x);
        if(x>c)
        {
            count=maxptr;
            maxptr=stack.size()-1;
            c=x;
        }
    }
    else if(q==2)
    {
        if(stack.back()==stack.at(maxptr))
        {
            maxptr=count;
        }
        stack.pop_back();
        if(maxptr==-1)
        {
            c=0;
        }
        else if(stack.size()==0)
        {
            c=0;
        }
        else
        {
            c=stack.at(maxptr);
        }
    }
    else if(q==3)
    {
        cout<<stack.at(maxptr)<<endl;
    }        
  }
}

$('.arrow').click(function() {
  $(this).toggleClass('active')
})

.arrow {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #999;
  transition: transform .5s;
  cursor: pointer;
}

.arrow.active {
  transform: rotate(90deg)
}

onclick的旋转代码不起作用？

1 个答案: