gpt4 book ai didi

javascript - 我将如何修复由于上面的元素动画而移动的元素?

转载 作者:行者123 更新时间:2023-11-28 08:34:24 25 4
gpt4 key购买 nike

我的网站出现错误。我似乎无法弄清楚为什么标题图片下方的 3 个按钮在第二张标题图片动画时移动。我的目标是让标题下方的 3 个按钮在 title2 设置动画时保持在原位。动画是不断收缩/增长的,称为脉冲。这是我所有的代码,它很乱,但这只是为了我学习。

<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
width: 600px;
position: static;
height: 150px;
margin: 30px 50px;
background-image: url("res/button1.png");
border: 1px solid #FF0030;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button2
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button2.png");
border: 1px solid #00B7FF;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button3
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button3.png");
border: 1px solid #00FFD5;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button1:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00B7FF;
}
div.button3:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00FFD5;
}
#seventyfive{
font-size:100px;
font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '160px',
height: (back) ? "60%" : "50%",
width: (back) ? "60%" : "50%",


}, 700, function(){pulse(!back)});
})(false);
</script>
感谢您阅读我的问题,我愿意接受任何答案/建议。谢谢大家!

最佳答案

垂直放置将基于元素上方任何内容的大小。所以,如果它上面的元素是 100px,那么下面的按钮将位于 100px + margin-bottom 的位置。当该元素为 200px 时,下面的按钮将从 200px + margin-bottom 开始。

您想要的是在您的图片标签周围放置一个大小不变的 div。

<div style="width: 500px; height: 500px">
<img id="seventyfive"; src="res/title2.png"</img>
</div>

PS,看看 css 动画与 jquery。

关于javascript - 我将如何修复由于上面的元素动画而移动的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28122280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com