个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 14:44:06 25 4
gpt4 key购买 nike

我不知道这是否可能。我的网页上有 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>

最佳答案

除了标准 jQuery 之外，您不需要任何东西!使用 CSS3 过渡。

CSS:

img {
  transition: 1s transform;
}

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

jQuery:

$(document).ready(function() {

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

当然，您可以更改旋转度数以满足您的需要

关于javascript - 使用 jqueryRotate 插件将图像旋转 90 度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36756949/

25 4 0
文章推荐： javascript - 异步执行作为参数传递的函数
文章推荐： javascript - 如何循环遍历 d3 中的内部值数组并添加相应的子元素？
文章推荐： javascript - 将 JSON 插入 HTML 数据属性
文章推荐： javascript - 通过单击 d3 选择/取消选择
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com