使用jqueryRotate插件将图像旋转90度

Question

我不知道这是否可能。 我的网页上有10张图片。 我希望能够旋转我使用JQueryRotate脚本单击的任何图像。 我只是不知道如何实现它。 任何帮助将不胜感激

这是我的图像的HTML代码

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>About Us</title>
    <link rel="stylesheet" type="text/css" href="styles/about-us_style.css">
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous">
    $(document).ready(function() {

  $('img').click(function() {
            $(this).toggleClass('rotate');
        });
});</script>
  </head>
  <body>

    <div id=body-content>
      <ul>
        <li><a href="home-page.html">Home Page</a><br></li>
        <li><a href="about-us.html">About us</a><br></li>
        <li><a href="contact-us.html">Contact us</a><br></li>
        <li><a href="login.html">login</a><br></li>
      </ul>

      <div id=main_menu>
        <p id=main-menu-paragrapf>
         Car Gallery
        </p>
        <div id="car1" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/9.ferrari-dino.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Ferrari Dino (1968–1972)</span><br>Launched in 1968, came equipped with a V-6 instead of the typical V-12.</p>
          </div>
        </div>


        <div id="car2" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/1.ferrari-250-gto_1.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Ferrari 250 GTO (1962-1964)</span><br>A stunning shape and incredible 3.0-liter V-12 makes this the definitive exotic. </p>
          </div>
        </div>

          <div id="car3" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/6.porsche-550-spyder.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Porsche 550 (1953–1956)</span><br>The 550 Spyder was  low-riding convertible that helped solidify Porsche's worldwide fame. </p>
          </div>
        </div>

        <div id="car4" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/8.lamborghini-miura.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Lamborghini Miura (1966–1972)</span><br>The Miura was Lamborghini's original midengined supercar.</p>
          </div>
        </div>

        <div id="car5" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/7.chevy-corvette.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Chevrolet Corvette (1963–1967)</span><br>The second generation Sting Ray marked the first fixed-roof Corvette coupe. </p>
          </div>
        </div>
         <div id="car6" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/4.ferrari-330-p4.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Ferrari 330 P4 (1967)</span><br>Only three were ever made. The V12 put out up to 450 hp. </p>
          </div>
        </div>
        <div id="car7" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/5.jaguar-e-type.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Jaguar E-Type (1961–1975)</span><br>Its famous shape hid  a 5.3-liter V-12 under the long hood. </p>
          </div>
        </div>
        <div id="car8" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/3.jaguar-xj13.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Jaguar XJ13 (1965)</span><br>The XJ13 is the greatest-looking designs. This prototype bridged the gap between D-Type and E-Type Jags </p>
          </div>
        </div>
        <div id="car9" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/2.alfa-romeo-33.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Alfa Romeo 33 Stradale (1967–1971)</span><br>The Alfa's T33 race car may be the pinnacle European '60s automotive style. It's thought to be the first car with butterfly doors </p>
          </div>
        </div>
        <div id="car10" class="polaroid">
          <img src="http://i1216.photobucket.com/albums/dd368/RenierSwart/10.mercedes-benz-300sl-gullwing.jpg" alt="Norway" style="width:100%">
          <div class="container">
            <p><span id="heading">Mercedes-Benz 300SL "Gullwing" (1955–1957)</span><br>The 300SL, famous for its gullwing doors that opened toward the sky, opens the top 10. Many have hailed the Benz as the world's first supercar. </p>
          </div>
        </div>

      </div>
    </div>

    <div id=images>

      <div id=logos>
        <img src="http://www.otopark.com/wp-content/uploads/2016/02/volvo-cars-logo-emblem.jpg" alt="W3Schools.com" style="width:75px;height:75px;">
        <img src="https://8096-presscdn-0-43-pagely.netdna-ssl.com/wp-content/uploads/2014/10/hyundai-logo.jpg" style="width:75px;height:75px;">
        <img src="https://8096-presscdn-0-43-pagely.netdna-ssl.com/wp-content/uploads/2014/10/ferrari-logo.jpg" alt="W3Schools.com" style="width:75px;height:75px;">
      </div>

    </div>


    <div id=footer>
      Website developed
    </div>


  </body>
</html>

Answer 1

您只需要标准jQuery就不需要任何东西！ 使用CSS3过渡。

CSS：

img {
  transition: 1s transform;
}

.rotate {
  transform: rotate(180deg);
}

jQuery的：

$(document).ready(function() {

  $('img').click(function() {
            $(this).toggleClass('rotate');
        });
});

当然，您可以更改旋转角度以满足您的需求

使用jqueryRotate插件将图像旋转90度

问题描述

1 个解决方案

解决方案1
2 2016-04-20 23:37:40

使用jqueryRotate插件将图像旋转90度

问题描述

1 个解决方案

解决方案1 2 2016-04-20 23:37:40

解决方案1
2 2016-04-20 23:37:40