javascript - 从字形过渡到输入文本？-6ren

javascript - 从字形过渡到输入文本？

转载作者：太空宇宙更新时间：2023-11-03 20:30:23

我正在努力实现 freecodecamp 的目标之一的功能:https://codepen.io/FreeCodeCamp/full/wGqEga/具体来说，我想将搜索图标转换为带有输入文本的表单，然后在用户单击 X 时转换回搜索图标。我不知道我是否在正确的轨道上，但是当我点击搜索时图标没有过渡发生。非常感谢您的帮助!

$(document).ready(function(){
  $('#SearchBar i').on('click', function(){
      $('#SearchBar').html('<form><input type="text" style="border: none;"><span> X</span></input></form>');
       $('#SearchBar form').toggleClass('clicked');
       $('input').toggleClass('clicked');
    });
});

body#bootstrapOverride {
  background-color: rgba(255, 10, 10, 0.8);
}

#random_page{
  cursor: pointer;
  font-size: 16px;
  position: relative;
  top: 240px;
  margin: auto;
  width: 50%;
  color: white;
  text-decoration: none;
}
#SearchBar{
  position: relative;
  margin: auto;
  top: 232px;
  width: 0px;
  left: 0px;
  font-size: 40px;
  padding: 0px;
  cursor: pointer;
   -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
  transition-property: width, border-radius, border, padding;
}

#SearchBar form.clicked{
  position: relative;
  margin: auto;
  top: 0px;
  left: -120px;
  width: 250px;
  padding: 10px;
  border: 5px;
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
}

input{
  width: 0px;
  -webkit-transition: width 2s linear 0s;
  -moz-transition: width 2s linear 0s;
  -ms-transition: width 2s linear 0s;
  -o-transition: width 2s linear 0s;
  transition: width 2s linear 0s;
}
input.clicked{
  width: 200px;
}
span{
  cursor: pointer;
  font-size: 0px;
  color: blue;
  font-family: papyrus;
  -webkit-transition: font-size 2s linear 0s;
  -moz-transition: font-size 2s linear 0s;
  -ms-transition: font-size 2s linear 0s;
  -o-transition: font-size 2s linear 0s;
  transition: font-size 2s linear 0s;
}

#genericText{
  position: relative;
  width: 50%;
  margin: auto;
  top: 240px;
  color: white;
  font-type: bold;
  font-size: 16px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.2.0.min.js">	</script>

<body id="bootstrapOverride">
  
<div class="container-fluid" id="parent">
  <div id="child">
    <h1 class="text-center"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" id="random_page"> Click here for a random article </a></h1>
        <div id="SearchBar">
          <i class="glyphicon glyphicon-search" id="glyph">     </i>
        </div>
        <div id="child4">  
      <h1 id="genericText" class="text-center"> Click on icon to search </h1>
        </div>
  </div>
</body>

最佳答案

希望对你有用。所以请尝试这个选项。

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.2.0.min.js">	</script>
  <script>
 $(document).ready(function(){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.searchbox-icon').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.searchbox-input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.searchbox-icon').css('display','none');
                } else {
                    $('.searchbox-input').val('');
                    $('.searchbox-icon').css('display','block');
                }
            }
  </script>
  
  
  <style>
  body#bootstrapOverride {
  background-color: rgba(255, 10, 10, 0.8);
}

#random_page{
  cursor: pointer;
  font-size: 16px;
  position: relative;
  top: 240px;
  margin: auto;
  width: 50%;
  color: white;
  text-decoration: none;
}
#SearchBar{
  position: relative;
  margin: auto;
  top: 232px;
  width: 0px;
  left: 0px;
  font-size: 40px;
  padding: 0px;
  cursor: pointer;
   -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
  transition-property: width, border-radius, border, padding;
}

#SearchBar form.clicked{
  position: relative;
  margin: auto;
  top: 0px;
  left: -120px;
  width: 250px;
  padding: 10px;
  border: 5px;
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
}

span{
  cursor: pointer;
  font-size: 0px;
  color: blue;
  font-family: papyrus;
  -webkit-transition: font-size 2s linear 0s;
  -moz-transition: font-size 2s linear 0s;
  -ms-transition: font-size 2s linear 0s;
  -o-transition: font-size 2s linear 0s;
  transition: font-size 2s linear 0s;
}

#genericText{
  position: relative;
  width: 50%;
  margin: auto;
  top: 240px;
  color: white;
  font-type: bold;
  font-size: 16px;
}

.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    top: 240px;
    margin: 0 auto;
    overflow:hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input {
    top: 0;
    border: 0;
    outline: 0;
    background: transparent;
    width: 200px;
    height: 45px;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 18px;
    color: #fff;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}
.searchbox .searchbox-icon img{display:none;} 
.searchbox-open .searchbox-icon img{display:block !important;} 

.searchbox-icon {
    width: 45px;
    height: 45px;
    display: block;
    position: absolute;
    top: 10px;
    font-family: verdana;
    font-size: 22px;
    right: -10px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    text-align: center;
    cursor: pointer;
    color: #dcddd8;
}
.searchbox-submit {
    background: transparent;
    color: transparent;
    border: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    height: 45px;
    width: 45px;
    background: url(https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/search-128.png);
    background-size: cover;
}
.searchbox-open .searchbox-submit {
    background: unset;
}
.searchbox-submit img, .searchbox-icon img{
width:22px;
}
.searchbox-open {
    width: 250px;
    border-radius: 20px;
    height: 45px;
    padding: 0;
    background: transparent;
    border: 2px solid #ccc;
}
form.searchbox input.searchbox-input {
    display: none;
}
form.searchbox-open input.searchbox-input {
display: block !important;
background: #fff;
margin: 0;
width: 100%;
color: black;
}

  </style>
</head>
<body id="bootstrapOverride">
  
<div class="container-fluid" id="parent">
  <div id="child">
    <h1 class="text-center"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" id="random_page"> Click here for a random article </a></h1>
        <form class="searchbox">
        <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
        <input type="submit" class="searchbox-submit" placeholder="">
        <span class="searchbox-icon"><img src="https://www.materialui.co/materialIcons/navigation/close_black_144x144.png"></span>
    </form>
      <h1 id="genericText" class="text-center"> Click on icon to search </h1>
  </div>
</body>
</html>

关于javascript - 从字形过渡到输入文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43486241/

文章推荐： c# - MemberInfo.MetadataToken 在编译器运行中是否稳定？

文章推荐： python - 将tensorflow BERT检查点转换为pytorch时出错

文章推荐： javascript - 使用切换按钮 Bootstrap 更改语言

swift - 过渡到 UITabBarController
我需要错误修复方面的帮助。我使用 segue 在 ViewController 之间传输。我有 UITabBarController 和一个 UIViewController。当我单击 vc 中的按
android - 过渡到 FragmentActivity
我可以使用下面的代码转换到 Fragment 类，但是如何使用相同的代码转换到 FragmentActivity。 FragmentActivity activity = new ABC(); //
oop - 过渡到 OO ABAP？
似乎我们的大多数 SAP 程序员都在使用旧版本的 ABAP，这是面向对象之前的版本。我还注意到，OO 的语言更加简洁和现代(他们显然借此机会摆脱了已弃用的东西)。由于该系统尚未推出，因此进行任何重新
ios - 过渡到 ARC - 发布不引发错误
我正在尝试将现有的非 ARC 项目移动到 ARC。我已将build设置中的 Objective-C 自动引用计数标志设置为是。这当然造成了很多有关发送显式发布/自动发布消息的错误。对于代码中的错误，
javascript - 过渡到 Canvas 上绘制的曲线？
我有一条由贝塞尔曲线绘制的简单直线。挑战是改变它过渡的位置，即如果曲线的高度增加或减少，它应该在过渡中发生，而不是突然发生。所以我的问题是提供 Canvas 鼠标悬停时的过渡？如何提供曲线过渡？ ca
php - 过渡到 MVC 编码的最佳方式是什么？
自从我拿起一本 PHP 书籍并开始使用 PHP 编码已经过去了大约 5 个月。起初，我在没有任何组织计划或 MVC 的情况下创建了我所有的网站。我很快发现那很痛苦..然后我开始在 stackoverf
jedis - 从 JedisPool 过渡到 JedisCluster
我的应用程序使用 AWS 上的 ElastiCache 进行缓存。我们当前的设置使用基本的 Redis 集群，没有分片或故障转移。我们现在需要迁移到启用了分片、故障转移等的集群 Redis 弹性缓存。
svn - 将多头项目从 SVN 过渡到 HG
我们正在加入现代世界并从 SVN 过渡到 Mercurial 以进行源代码控制。其中大部分非常简单——只需将当前主干导入 HG 并进行克隆。一个项目有点花哨，我没有看到正确的方法来做到这一点。有问题
python - tensorflow 过渡到 GPU 版本
我已经使用 tensorflow 一段时间了，一切正常，直到我尝试切换到 gpu 版本。卸载了以前的tensorflow， pip 安装 tensorflow-gpu (v2.0) 下载并安装vis
swagger - 过渡到 Swashbuckle 5.0
我通过 Swashbuckle V4 使用 Swagger，并使用 API key 对端点进行身份验证。使用 Swashbuckle V4 时，以下配置完美运行(请注意，仅显示 Swagger 代码
java - 从 Castor 过渡到 JPA
我正在努力使我的 java 应用程序更符合标准，我面临的最大问题之一是将我们的 ORM 框架从 Castor JDO 转换为 JPA 实现(考虑 Hibernate 或 DataNucleus)。我们
javascript - Ember JS 过渡到/链接到回调
我希望在每次点击链接或在 EmberJS 中调用 transitionTo 时触发回调。我想这样做的原因是隐藏在进行转换时可能打开的菜单/下拉菜单。我不知道从哪里开始。我的 Google-fu 可能很
ios - 过渡到 Xcode 5 错误和丢失数据
我当时使用的是 Xcode 4.6.1，并且已经创建了一个由 apple 批准并在 App Store 上的 iphone/ipad 应用程序。它是为 5.1 的最低部署目标而构建的现在是时候让它与
ios - 从 UIViewController 过渡到 TabBarViewController
我已经寻找解决方案 6 个小时了，但没有找到适合我情况的解决方案。我的 Storyboard遵循以下流程: TabBarViewController -> NavigationController -
ios - 从 SKScene 过渡到 UIViewcontroller
例如，如果我有: class SpriteKitScene: SKScene { ... } 在那里我想要一个图像，当点击(按下，点击，触摸任何东西)时载入另一个文件: class UiViewcon
ios - 使用数据从 XIB 过渡到 Storyboard
所以我找到了一个如何从XIB过渡到storyboard的例子 NSString * storyboardName = @"CheckoutStoryboard"; UIStoryboard *stor
swift - 过渡到 ViewController 点击 TableViewCell
如何通过点击表格 View 单元格来转换到 View Controller ？我目前的结构是: 我使用 navigation controller 作为我在我的应用程序 atm 中导航的唯一方式。我
ios - 如何从 UIViewController 过渡到 UINavigationController
我正在尝试通过 segue 转换(模态)到 UINavigationController来自UIViewController .我的UIViewController和 UINavigationCont
ios - 如何从自定义 View 过渡到 AVPlayerViewController？
我有一个自定义 View : class MediaPlayerView: UIView { var mediaURL: URL? { didSet {
java - 从 Java 过渡到 C++
根据语言的发明时间和语言的结构，这种转变可能意味着要走另一条路，但我对我的 Java 能力相当有信心，或者至少我在这方面足够好。但我现在正在尝试使用 C++，但我遇到了困难。在 java 中，读取一

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从字形过渡到输入文本？