个人中心
gpt4 book ai didi

javascript - 左右滑动元素组Javascript

转载 作者：行者123 更新时间：2023-12-03 05:57:11 24 4
gpt4 key购买 nike

我尝试为搜索、语言和联系选项创建一个小标题导航。 (下面的演示)

所有元素都是可点击的。我无法管理内容滑入、移动其他图标并在单击任何其他元素时滑回。

PS:搜索栏已经在我的 jquery、jquery ui 文档中工作，可以滑入和返回(在 JSFiddle 上不起作用，不知道为什么..，但 p 标签无法滑入。搜索栏正在使用代码像这样:

$(function () {
      $(".lupeIcon").click(function (){
            $(".searchField").addClass("searchFieldWidthExtender",2000)
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
            $(".globusField").hide("slide", {direction: "right"}, 2000);

  });
        });

)

这是代码

HTML:

    <body>
 <nav>
<div class="navIcon telefonIcon"><p class="telefonField">12 346 5</p><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="navIcon lupeIcon"><input class="searchField" type="text" name="search"><i class="fa fa-search" aria-hidden="true"></i></div>
<div class="navIcon globusIcon"><p class="globusField">DE | EN</p><i class="fa fa-globe" aria-hidden="true"></i></div>
                </nav>

                </body>

CSS:

div.navIcon{
    float: left;
    margin: 0 40px 0 0;
    line-height: 95px;
    padding: 0;
    font-size: 20px;
    color: red;
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    display: -webkit-box; 
}
.searchField {
    display: none;
    height: 30px;
    margin: 0 10px 0 0;
    border: none;
    border-radius: 30px;
    box-shadow: inset 0 0 2px red;

}

.telefonField, .globusField { 
    display: none;
    height: 30px;
    margin: 0 10px 0 30px;
    vertical-align: middle;

}

Javascript:

     $(".telefonIcon").click(function (){
            $(".telefonField").addClass("displayInliner",2000)
            $(".telefonField").show("slide", {direction: "right"}, 2250);
            $(".searchField").hide();
            $(".globusField").hide("slide", {direction: "right"}, 2000);
  });

      $(".lupeIcon").click(function (){
            $(".searchField").addClass("searchFieldWidthExtender",2000)
            $(".searchField").show("slide", {direction: "right"}, 2250);
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
<!--        $(".globusField").hide("slide", {direction: "right"}, 2000); -->            
                        $(".globusField").hide();

  });
      $(".globusIcon").click(function (){
            $(".globusField").addClass("displayInliner",2000)
            $(".globusField").show("slide", {direction: "right"}, 2250);
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
            $(".searchField").hide("slide", {direction: "right"}, 2000);

  });

Demo with Icons

最佳答案

我制作了您的联系人菜单动画。
我玩得很开心。
我这样做是因为我觉得你想要的效果很棒...

您会注意到我对您的代码进行了很多更改。
我真的不知道如何一一解释所有的变化，所以请随意询问。

看看我的CodePen .


HTML

<body>
    <nav>
        <div class="field telefonField">12 346 5</div>
        <div class="navIcon telefonIcon">
            <i class="fa fa-phone" aria-hidden="true"></i>
        </div>


        <div class="field searchField">
            <input type="text" name="search">
        </div>
        <div class="navIcon lupeIcon">
            <i class="fa fa-search" aria-hidden="true"></i>
        </div>


        <div class="field globusField">DE | EN</div>
        <div class="navIcon globusIcon">
            <i class="fa fa-globe" aria-hidden="true"></i>
        </div>
    </nav>
</body>



CSS

div.navIcon {
    float: left;
    line-height: 95px;
    padding: 0;
    font-size: 20px;
    color: red;
}
.fa{
    float: left;
    line-height: 95px;
    color: red;
    padding: 0 6px;
}

.telefonField,
.searchField,
.globusField {
    float:left;
    display:none;
    width: 0;
    margin: 0;
    color: red;
    white-space:nowrap;
    overflow:hidden;
    line-height: 95px;
}

.searchField input{
    border: none;
    width:0px;
    border-radius: 30px;
    box-shadow: inset 0 0 2px red;
    outline: none;
    padding: 0.3em 0.5em 0.1em 0.7em;
}



jQuery

var showDelay = 2000;
var hideDelay = 2000;       // If you want to set a different hide delay
var thisWidth = 0;          // Element width are different
var searchField = false;    // For the input exception

$(".navIcon").click(function(){

    // Execute script only if «this» is not already displayed
    if( $(this).prev(".field").css("width") == "0px" ){

        if( $(this).prev(".field").hasClass("telefonField") ){
            thisWidth = "63px";
            searchField = false;
        }
        if( $(this).prev(".field").hasClass("searchField") ){
            thisWidth = "248px";
            searchField = true;
        }
        if( $(this).prev(".field").hasClass("globusField") ){
            thisWidth = "59px";
            searchField = false;
        }

        // Show it!
        $(this).prev(".field").animate({width:thisWidth},showDelay).show();

        // Hide the others
        $(".field").not( $(this).prev(".field") ).animate({width:"0px"},hideDelay,function(){
            $(this).hide();
        });

        // Also animated the input width...
        if(searchField){
            $(".searchField input").show().animate({width:"225px"},showDelay);
        }
    }
});

关于javascript - 左右滑动元素组Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39876656/

24 4 0
文章推荐： javascript - 当选取框文本居中一些然后继续时如何停止选取框文本
文章推荐： javascript - 禁用表单提交可防止发送按钮属性
文章推荐： javascript - 隐藏div中的表单并仅在重定向后显示它
文章推荐： javascript - PHPStorm > 将语言级别切换到 JSX Harmony
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com