Drehen eines Bildes 90 Grad mit dem jqueryRotate Plugin

Ich weiß nicht, ob das möglich ist. Ich habe 10 Bilder auf einer Webseite. Ich möchte in der Lage sein, jedes Bild zu drehen, auf das ich mit dem JQueryRotate-Skript klicke. Ich bin einfach nicht so, wie man es umsetzt. Jede Hilfe wirdDrehen eines Bildes 90 Grad mit dem jqueryRotate Plugin

Hier ist mein HTML-Code der Bilder

<!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>

Quelle

2016-04-20 Renier Swart

Sie brauchen nicht alles andere als Standard jQuery geschätzt! Verwenden Sie CSS3-Übergänge.

CSS:

img { 
    transition: 1s transform; 
} 

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

jQuery:

$(document).ready(function() { 

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

Natürlich können Sie die Anzahl der Grad der Drehung ändern, um Ihre Bedürfnisse

Quelle

2016-04-20 23:37:40 Noah

Gibt abgefangene Ausnahme anzupassen. $ ist nicht definiert –

Das bedeutet, dass Sie jQuery nicht ordnungsgemäß eingerichtet haben. Stellen Sie sicher, dass Sie '' über Ihrem eigenen jQuery-Objekt einschließen Skripte, vorzugsweise in der '' Ihrer Seite – Noah

Aktualisiert die Frage. Immer noch nichts passiert, wenn Sie auf ein Bild klicken –

Drehen eines Bildes 90 Grad mit dem jqueryRotate Plugin

Antwort

Verwandte Themen