如何让页面加载后一秒后图片上移到屏幕中央

发布于 2025-01-11 05:37:13 字数 901 浏览 0 评论 0原文

我有一个问题！我在手机安装时的图片下半部分有一个图片。我希望用户进入网站后，能够在1秒后自动将鸭子屏幕向上拉一点，这样鸭子就可以显示在手机上。就在中间>

但是我现在有两个问题，因为我的程序已经很久没有成为web程序了，我不知道我是否可以这样写？中间呢？ 2、如何让鸭子在页面加载后一秒后滚动到中间？

感谢您看到我的问题，无论您是否帮助我解决了上述问题。

window.onload =  function(){
    $('html,body').animate({scrollTop:600},1000);
}

body{
  width: 100%;
  height: 1200px;
  display: flex;
  justify-content:center;
  align-items:center;
}
#js-duck{
  display: inline-block;
  width:200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="js-duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png" alt="duck">

原文

I have a question!
I have a picture on the lower part of the picture when the mobile phone is installed. I hope that after entering the website, the user can automatically pull the duck screen up a little after 1 second, so that the duck can be displayed on the mobile phone. Right in the middle>

But I have two problems now, because my program has not been a web program for a long time, I don’t know if I can write it like this
? What about the middle?
2. How to make the duck scroll to the middle after one second after the page is loaded?

Thank you for seeing my question, whether or not you have helped me with the above questions.

window.onload =  function(){
    $('html,body').animate({scrollTop:600},1000);
}

body{
  width: 100%;
  height: 1200px;
  display: flex;
  justify-content:center;
  align-items:center;
}
#js-duck{
  display: inline-block;
  width:200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="js-duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png" alt="duck">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对风讲故事 2025-01-18 05:37:14

为了运行延迟的代码，您可以使用 setTimeout() 函数；

...
setTimeout(function() {
   // Delayed code here
}, 
1000); // Time after which the code gets executed in seconds (1000 = 1s)
...

关于在中间显示元素，您可以将元素的显示属性设置为任何内联内容（img 已经是）并使用 text-align: center;在父母身上。对于垂直对齐，我个人使用相当过时的解决方案，因此我将其留给其他人。

In order to run delayed code you can use the setTimeout() function;

...
setTimeout(function() {
   // Delayed code here
}, 
1000); // Time after which the code gets executed in seconds (1000 = 1s)
...

About displaying an element in the middle, you can set element's display property to anything inline (which img already is) and use text-align: center; on the parent. For vertical alignment I personally use quite an outdated solution, so I'll leave it up to someone else.

回复收藏 0 原文

~没有更多了~