个人中心
gpt4 book ai didi

javascript - 使用搜索栏动画移动图像时出现问题

转载 作者：行者123 更新时间：2023-12-02 21:58:26 27 4
gpt4 key购买 nike

当焦点随着动画向上移动时，我有一个搜索栏
我希望将图像放置在搜索栏顶部...
这样，当我们单击搜索栏时，图像会变小并在左上角移动，搜索栏会以同步动画向上移动。

现在我已经成功移动搜索栏，但卡在图像部分......
我正在尝试用 JS 检测焦点，然后也对图像进行转换，但是左边距和下边距不起作用...

谁能帮忙完成一下吗？请

var input = document.getElementById("SearchBar");
var homeImage = document.getElementById("homeImage");
input.addEventListener("focus", function () {
    homeImage.classList.add('horizTranslate');
});
#SearchBar {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    width: 40%;
    box-sizing: border-box;
    border: 3px solid;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('search-icon.svg');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    border-color: #ffaf7b;
    padding: 12px 20px 12px 40px;
    transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}

#homeImage {
    position: absolute;
    top: 28%;
    left: 45%;
}

#SearchBar:focus {
    width: 90%;
    top: 22%;
    border-color: #ff512f;
}


.horizTranslate {
    transition: 3s;
    margin-right: 50%;
}
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <input id="SearchBar" placeholder="XXXXX...">
    <img src="https://via.placeholder.com/150" src="pattern-img.png" alt="Girl in a jacket" id="homeImage"><script src="ui.js" type="text/javascript"></script>
  </body>
</html>

这里是codepen

最佳答案

没有 JavaScript

CSS:

#SearchBar {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 40%;
  box-sizing: border-box;
  border: 3px solid;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("search-icon.svg");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  border-color: #ffaf7b;
  padding: 12px 20px 12px 40px;
  transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}

#homeImage {
  position: absolute;
  top: 28%;
  left: 45%;
  transition: 1s;
}

#SearchBar:focus {
  width: 90%;
  top: 22%;
  border-color: #ff512f;
  transition: 1s;
  margin-right: 50%;
}

#SearchBar:focus+#homeImage {
  top: 0;
  left: 80%;
  transition: 1s;
}

关于javascript - 使用搜索栏动画移动图像时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59943500/

27 4 0
文章推荐： javascript - ElementRef 无法与 Bsdatepicker 一起使用 Angular 8
文章推荐： virtual-machine - 如何在多台计算机上有效使用 VirtualBox 虚拟机？
文章推荐： security - 带 ECC 的串行 key
文章推荐： javascript - 如何捕获 Action 窗口:beforeunload Angular 8