京东商城搜索框特效实现

JavaScript 专栏收录该内容
27 篇文章 0 订阅

商城搜索框特效分析

在这里插入图片描述
上面的搜索框实现了哪些功能?
两个方面考虑:输入关键字之前和输入关键字之后

1:输入关键字之前,搜索框内有默认的关键字,并且是轮播的,当然这是为了打广告用的
2:鼠标移动到搜索框中时,关键字消失,等待用户表输入,用户输入的关键字颜色更深一点,也就是说默认的轮播关键字颜色比较暗一点,失去焦点之后,继续轮播
3:用户输入关键字之后,鼠标移动到搜索框之外,再移动到搜索框内准备继续输入,用户输入的关键字不会消失,显然这是必须的,不可能让用户重复输入吧,并且,此时移出的失去焦点,用户表输入的关键字颜色不变暗

关键思路:

1、轮播的关键字肯定是后台获取的,可以存到数组中表示,然后加个定时器,每隔一秒数组下标加1,当然这里需要条件控制,毕竟关键字数量有限,超出数组长度时将下标归零。
2、给搜索框加事件监听,分别处理获得焦点,失去焦点,输入文本时的情况

整个项目代码详情见:
Github

JS部分代码如下:

window,onload=function(){
    // 数据渲染到数组中
    let keyWords = JSON.parse(document.getElementById("J_keyWords").innerHTML);
    autoKw=document.getElementById("J_autoKw");
    t=null;
    let kwOrder = 0;
    let len=keyWords.length;
    searchInput=document.getElementById("J_btn");
// 获得焦点,停止轮播,关键字颜色变浅
    searchInput.addEventListener('focus',function(){
        clearInterval(t);
        autoKw.style.color="#ccc";
    },false);

// 输入文本时,搜索框中关键字消失
    searchInput.addEventListener('input',function(){
        // 关键字是否显示
        isShow(this.value);
    },false);

// 失去焦点,重新启动,颜色恢复
    searchInput.addEventListener('blur',function(){
        t=setInterval(autoKwChange,1000);
        autoKw.style.color="#6c6c6c";

    },false);

    function autoKwChange(){
        autoKw.innerHTML = keyWords[kwOrder];
        // if(kwOrder>=len-1){
        //     kwOrder=0;
        // }else{
        //     kwOrder++;
        // }
        kwOrder=kwOrder>=len-1 ? 0: kwOrder+1;
    }

    function isShow(val){
        // // value值为空,让关键字显示
        // if(val.length<=0){
        //     autoKw.style.display="block";
        // }
        // // value值不为空,说明有输入,让关键字消失
        // else{
        //     autoKw.style.display="none";
        // }
        autoKw.style.display=val.length<=0? 'block': 'none';
    }
    function setAutoKw(){
        t=setInterval(autoKwChange,1000);
    }
    setAutoKw();
}

实现过程问题与技巧

1、设计鼠标聚焦停止轮播过程时,只有点击搜索框空白区域,才会停止轮播,而直接点击在关键字之上,每效果,为什么?
       input 框被div包裹着的,左边被 关键字所在div顶开了,聚焦不到其父元素
解决方法:将关键字所在div 向下移动一层,然后调input 输入框背景颜色为透明,不然轮播的关键字会看不到,此时input框占满整个父级 div

.input-wrap{
    position: relative;
    width: 350px;
    height: 40px;
    border: 1px;
    margin: 100px auto;
    background-color: transparent;
}


.input-wrap .autoKw{
    position: absolute;
    line-height: 40px;
    padding-left: 5px;
    color: #6c6c6c;
    z-index: -1;
}
  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值