首页 > 其他分享> > 我踩过的坑可是填平了哟那你呢？

我踩过的坑可是填平了哟那你呢？

2021-09-30 16:34:43 作者：互联网

一、实现导航栏中“下载App“和“购物车”的功能

二、实现侧边栏的商品显示的功能

小米官网的部分功能效果如下

一、实现导航栏中“下载App“和“购物车”的功能

效果图展示：

实现功能介绍：当我们鼠标移动到下载app上面缓慢的出现log图标，注意并不是直接用显示、隐藏那么简单，logo的出现需要滚动的效果

思路：

在当前链接里面添加一个盒子
使用定位将盒子放在该链接的下面
鼠标触摸的时候就滚动的显示
鼠标离开的时候就滚动的消失

代码：

html

<a href="" class="App">下载app
         <i class="san glyphicon glyphicon-eject"></i>
         <span class="app">
            <img class="tu" src="./images/xiaomi-android.png" alt="小米商城">
            小米商城APP
         </span>
</a>

css

.header-nav .app img {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 15px 0;
}
.header-nav .app {
   position: absolute;
   top: 40px;
   left: 528px;
   width: 124px;
   height: 0px;
   color: #333;
   padding: 10px;
   font-size: 14px;
   text-align: center;
   background-color: #fff;
   box-shadow: 0 1px 5px #aaa;
   opacity: 0;
   overflow: hidden;
   z-index: 99;
}

    var App = document.querySelector('.App');
    var app = document.querySelector('.app');
    var san = document.querySelector('.san');
    //二维码的制作
    App.addEventListener('mouseover', function () {
        app.style.transition = ' all 0.4s ease-in';
        san.style.transition = ' all 0.2s ease-in';
        app.style.height = '167px';
        app.style.opacity = '1';
        san.style.opacity = '1';
    })
    App.addEventListener('mouseleave', function () {
        app.style.opacity = '0';
        app.style.height = '0';
        san.style.opacity = '0';
    })

购物车的原理是一样的这里就不重复讲解啦

二、实现侧边栏的商品显示的功能

效果图展示：图1是鼠标移动到li上面就显示商品信息，图2是可以触摸商品里面的每个信息

思路：

利用排它思想，实现鼠标移动到侧边栏的li身上则背景颜色就改变
鼠标移动到哪一个li，就显示对应的商品信息

下面代码就是，利用排他思想实现鼠标在谁的身上，就更改当前元素的背景颜色

    for (var i = 0; i < list.length; i++) {
        list[i].addEventListener('mouseover', function () {
            for (var i = 0; i < list.length; i++) {
                list[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'rgb(255, 94, 0)';
        })
     }

显示当前元素的商品信息：当鼠标移动到当前元素，其对应的商品信息显示，但这这里有个注意的地方：之前有很多小伙伴问我，明明商品信息显示了为什么触摸不到里面的信息呢？不要疑惑-因为很多的小伙伴是吧商品信息放在外边的，当鼠标经过就显示，当鼠标离开当前元素，那么商品信息自然就消失啦～～所以将对应的商品信息嵌套在触发元素的里面

结构：下面的结构就是其中一个元素，其他的就自己补充完整哟这样子的话就可以触摸啦

<li class="lis-t">
   <a href="" class="co">小米手机</a>
     <div class="item">
        <ul class="shouji">
            <li>
                <a href="">
                 <img src="./images/手机1.webp" alt="">
                 <div>Xiaomi MIX 4
                     <div class="p1">4999元起</div>
                 </div>
                </a>
            </li>
            <li>
                 <a href="">
                   <img src="./images/手机1.webp" alt="">
                   <div>Xiaomi MIX 4
                   <div class="p1">4999元起</div>
                   </div>
                 </a>
            </li>
            <li>
                 <a href="">
                    <img src="./images/手机1.webp" alt="">
                    <div>Xiaomi MIX 4
                       <div class="p1">4999元起</div>
                    </div>
                 </a>
            </li>
            <li>
                  <a href="">
                    <img src="./images/手机1.webp" alt="">
                    <div>Xiaomi MIX 4
                         <div class="p1">4999元起</div>
                    </div>
                  </a>
             </li>
             <li>
                   <a href="">
                   <img src="./images/手机1.webp" alt="">
                    <div>Xiaomi MIX 4
                        <div class="p1">4999元起</div>
                    </div>
                    </a>
             </li>
             <li>
                   <a href="">
                      <img src="./images/手机1.webp" alt="">
                      <div>Xiaomi MIX 4
                           <div class="p1">4999元起</div>
                      </div>
                   </a>
              </li>
          </ul>
      </div>
   </li>

 //侧边栏
    var lis = document.querySelector('.side-ul');
    var as = lis.querySelectorAll('a');
    var ones = lis.querySelectorAll('.phone');
    for (var i = 0; i < lis.children.length; i++) {
        lis.children[i].setAttribute('index', i);
        lis.children[i].addEventListener('mouseover', function (e) {
            var index = this.getAttribute('index');
            ones[index].style.display = 'block';
        })

        lis.children[i].addEventListener('mouseleave', function (e) {
            for (var i = 0; i < lis.children.length; i++) {
                ones[i].style.display = 'none';
            }
        })
    }

三、轮播图效果

效果图展示：

轮播图呢之前是把实现的效果都是自己作出来的，下面介绍一个框架，用起来非常的方便

swiper框架 https://www.swiper.com.cn/ 里面有很多的轮播图的框架，前端人员必备的，如果自己一个一个敲的话，耗时间、有时出现的效果不佳，

免费的框架为什么不用呢？

如何使用：

下载框架

将下载好的Swiper 放入到我们项目的根目录下面

接下来就是引用框架了

最后一步就是到swiper里面找到 demos文件夹，里面有很多的样式，选择自己需要的，然后将里面需要的代码复制到自己的页面中，尽量不要更改里面的属性

就很方便快捷的实现轮播图的功能啦

四、实现登录功能

登录页面相比大家一点都不陌生，但是随处可见的登录页面你能得心应手吗?

效果展示：

里面最核心的东西就是提交按钮是否能提交

表单提交也是非常的简单，利用onclock事件触发我们写好的check函数

js里面的函数都是封装好的

需要注意一点的是：页面的加载顺序 js的引入文件一定要放在body 的下面哟

效果图：功能是让下面的下划线跟随上面元素的移动而移动

可以看到登录下面那个下滑线了吗？这里是一个巨大的坑呀，博主踩过的坑，就不会让你们再踩了，来来来仔细听哟～～～

bug：我在做注册页面的时候使用链接跳转的方式实现的，但是这种方法并不是很优雅呢，更严重的是下面的的下面的下划线并不能随着上面的元素的移动而移动，

解决方案：就是将登录、注册写在一个页面，用不同的盒子去书写不同的功能，当鼠标触发到那个元素的时候就实现切换的效果，方法告诉你们了，自己下去一定要动手试一试哟？只看不做等于白看

js动画-下划线的实现我们在写的时候尽量将动画函数封装在外面，点击事件的里面就直接调用就好啦，但是博主是一个人美心善的菇凉，所以一次性就给你们写出来啦。是不是很开心呢

 register.addEventListener('click', function (e) {
        animate(out, 60, function () { });
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = Math.ceil((target - obj.offsetLeft) / 10); 
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer); //当盒子的left值大于400后就停止计时器
                    //回调函数写到停止计时器的位置
                    if (callback()) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px'; //在原先的位置加上步长直
            }, 15)
        }

五、扫码登录中 “二维码失效”的功能

效果图：

图片没有失效之前

图片失效之后

这个其实效果也是不难的，其实也就是用一个遮罩层的效果，虽然效果并没有实现真正的二维码刷新，但是现阶段这种效果还是好学费的。

方法：利用到的就是定时器，在定时器的选择上：由于它是隔多少秒二维码失效，所以用到的定时器是：setInterval

            //遮罩层的定时
            setInterval(function () {
                mask.style.display = 'block';
            }, 5000)
            mask.addEventListener('click', function () {
                this.style.display = 'none';
            })

六、总结

这些功能都是让我们更加熟练的运用JavaScript知识，里面用到了元素的显示与隐藏，DOM对页面元素的增删改查，DOM的事件包括：点击事件onclick、鼠标经过事件：mouseover、鼠标离开事件：mouseover，js动画函数animate，定时器，表单校验

这些都是js比较基础的知识，也是需要我们掌握的东西，虽然框架很多但是当我们明白了里面的原理的时候，使用框架也更加得心应手啦？

标签：可是,function,style,商品信息,obj,app,填平,var
来源： https://blog.csdn.net/qq_52764447/article/details/120561518

我踩过的坑 可是填平了哟 那你呢？

小米官网的部分功能效果如下

一、实现导航栏中“下载App“和“购物车”的功能

二、实现侧边栏的商品显示的功能

三、轮播图效果

四、实现登录功能

五、扫码登录中 “二维码失效”的功能

六、总结

我踩过的坑可是填平了哟那你呢？