我想自动缩放转换

Question

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Multi Step Form</title>
      <script
        src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous">
      </script>
      <script src="index.js"></script>

      <link rel="stylesheet" href="index.css">
   </head>
   <body>
    <!--zoom animate-->
    <div class="container">
      <img src="bg.jpg">
   </div>
   <script>
      let container = $('.container');
      container.classList.add('animate');
   </script>
   </body>
</html>

.container{
  position: absolute;
  left: 10%;
  top:10%;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
}

img{

  max-width: 100%;
  transition: all 0.2s linear;
  transform: scale(1.5);
}

.animate{
  transform: scale(1);
}

I was editing the code like Embeding javascript in the body tag, and changing .container:hover img to .animate.我正在编辑代码，例如在 body 标记中嵌入 javascript，并将 .container:hover img 更改为 .animate。 But this code is not working because of Uncaught TypeError: Cannot read properties of undefined (reading 'add').但是由于 Uncaught TypeError: Cannot read properties of undefined (reading 'add')，这段代码不起作用。 I don't know why Uncaught TypeError has occured, and still don't know what the problem is.不知道为什么会出现Uncaught TypeError，也不知道是什么问题。 Please help.请帮忙。

 .container{ position: absolute; left: 10%; top:10%; width: 200px; height: 200px; margin: 0px auto; overflow: hidden; } img{ max-width: 100%; transition: all 0.2s linear; transform: scale(1.5); } .animate{ transform: scale(1); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Multi Step Form</title> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"> </script> <script src="index.js"></script> <link rel="stylesheet" href="index.css"> </head> <body> <!--zoom animate--> <div class="container"> <img src="bg.jpg"> </div> <script> let container = $('.container'); container.classList.add('animate'); </script> </body> </html>

Answer 1

You can do that using javascript instead of您可以使用 javascript 而不是

.container:hover img{
   transform: scale(1);
 }

Use利用

.animate{
   transform: scale(1);
 }

And inside you javascript code, call a function on body load and inside that function do在你的javascript代码中，在身体负载上调用一个函数，然后在该函数内部调用

let container = $('.container');
container.classList.add('animate');

Answer 2

You can use a basic animation to get the desired result on page load.您可以使用基本动画在页面加载时获得所需的结果。

 .container{ position: absolute; left: 0; top:0; width: 200px; height: 200px; margin: 0px auto; overflow: hidden; } img{ max-width: 100%; animation: zoomout 0.2s linear; } @keyframes zoomout { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

 <div class="container"> <img src="//picsum.photos/200"> </div>

我想自动缩放转换

问题描述

2 个解决方案

解决方案1
0 2022-05-17 13:42:33

解决方案2
-1 已采纳 2022-05-17 13:58:13

我想自动缩放转换

问题描述

2 个解决方案

解决方案1 0 2022-05-17 13:42:33

解决方案2 -1 已采纳 2022-05-17 13:58:13

解决方案1
0 2022-05-17 13:42:33

解决方案2
-1 已采纳 2022-05-17 13:58:13