移动端电梯导航页面

最新推荐文章于 2024-07-17 09:44:02 发布
最新推荐文章于 2024-07-17 09:44:02 发布
阅读量440 收藏 6
点赞数 12
分类专栏： js 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56713342/article/details/135169960
版权

目录

html代码

css代码

js代码

效果图

html代码

  <!-- 头部 -->
    <div class="head">

        <div class="right-tou"><img src="./img/icon/icon-back.png" alt=""></div>
        <div class="middle">
            <!-- 放大镜 -->
            <span><svg class="icon fangda" aria-hidden="true">
                    <use xlink:href="#icon-fangdajing"></use>
                </svg></span>
            <!-- input输入框 -->
            <input id="ipt" type="text" placeholder="手机狂欢节抢iPhone X">

        </div>

        <div class="redback"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hongseqiandai"></use>
            </svg></div>
        <div class="xx"><span class="iconfont icon-duanxinxiaoxixinxi xi
            "></span></div>

    </div>


    <!-- 侧边栏 -->

    <div class="slider">
        <ul class="list-l">
            <li class="active">热门推荐</li>
            <li>美容彩妆</li>
            <li>母婴专区</li>
            <li>箱包配饰</li>
            <li>家居个护</li>
            <li>营养保健</li>
            <li>服饰鞋靴</li>
            <li>数码家电</li>
            <li>运动户外</li>
            <li>汽车用品</li>
            <li>生活旅行</li>
        </ul>

        <div class="list-right">
            <div class="box">
                <p class="img"><img src="./img/pd/cf-4.jpg" alt=""></p>
                <h2>热门推荐</h2>

                <ul class="ww">
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                </ul>
            </div>


            <!-- 家具狂欢节 -->
            <div class="box">
                <p class="img"><img src="./img/pd/cf-4.jpg" alt=""></p>
                <h2>美容彩妆</h2>

                <ul class="ww">
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                </ul>
            </div>

            <!-- 母婴专区 -->
            <div class="box">
                <h2>母婴专区</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 箱包配饰 -->
            <div class="box">
                <h2>箱包配饰</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 家居个护 -->
            <div class="box">
                <h2>家居个护</h2>
                <div class="kongbai">

                </div>
            </div>
            <!-- 营养保健 -->
            <div class="box">
                <h2> 营养保健</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 服饰鞋靴 -->
            <div class="box">
                <h2>服饰鞋靴</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 数码家电 -->
            <div class="box">
                <h2>数码家电</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 运动户外 -->
            <div class="box">
                <h2>运动户外</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 汽车用品 -->
            <div class="box">
                <h2>汽车用品 </h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 生活旅行 -->
            <div class="box">
                <h2>生活旅行</h2>
                <div class="kongbai">

                </div>
            </div>

        </div>








    </div>


    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li>
                <a href="./index.html">
                    <span class="iconfont icon-home_fill  "></span>
                    <!-- <span><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-home_fill"></use>
                        </svg></span> -->
                    <p> 首页</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-fenlei dd icon-red "></span>
                    <p class="footer-red">分类</p>
                </a>

            </li>
            <li>
                <a href="./faxian.html">
                    <span class="iconfont icon-icon_find dd  "></span>
                    <p >发现</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-gouwuchefill dd "></span>
                    <p>购物车</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-my dd"></span>
                    <p>我的</p>
                </a>

            </li>
        </ul>
    </div>

css代码

* {
    list-style: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

html,
body {
    /* padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; */
    overflow-y: auto;
}

/* 头部固定部分 */
.head {
    width: 10rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* border-bottom: 1px solid #e6e3e3; */
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    margin-bottom: .0267rem;
}

.img {
    width: 6.8rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: .6667rem;
}

.img img {
    width: 2.4rem;
    height: .6749rem;
    vertical-align: middle;

}

.right-tou img {
    width: .6667rem;
    height: .6667rem;
}

.xi {
    font-size: .5333rem;
}

.fangda {
    font-size: .5333rem;
    color: white;

    opacity: 0.2;

}

.middle span {
    display: inline-block;
    width: .5333rem;
    /* height: .7467rem; */
    height: .6133rem;
    margin-left: .2667rem;
    /* background-color: chartreuse; */
    /* padding-top: .1333rem; */

}

.middle input {
    outline: none;
    border: none;
    /* background-color: brown; */
    background-color: #e5e5e5;
    height: .7467rem;
    width: 6.1333rem;
    /* font-size: 18px; */

}

/* 搜索框 */
.middle {
    width: 7.36rem;
    height: .7467rem;
    background-color: #e5e5e5;
    border-radius: .3733rem;

    display: inline-flex;

}

/* 侧边栏 */
.slider {
    /* margin-top: 1.3333rem; */
    display: flex;
    background-color: #f2f4f5;
   
}
.slider .list-l{
    height: 15.4667rem;
    width: 1.9467rem;
    position:fixed;
    top: 1.3333rem;
    left: 0;
    /* background-color: #f2f4f5; */
}
.slider .list-l>li {
    width: 1.9467rem;
    height: 1.28rem;
    /* background-color: #f2f4f5; */
    font-size: .32rem;
    text-align: center;
    line-height: 1.28rem;
}

/* .slider ul{
    float: left;
} */
body {
    background-color: #f2f4f5;
}

.list-right {
    background-color: white;
    /* float: left; */
    /* width: 7.6267rem;
    height: 15.4667rem; */
    overflow-y: auto;
    /* margin-left: .1333rem; */
    padding-left: .1333rem;
    padding-right: .1333rem;
    margin-top: 1.3333rem;

    margin-left: 1.8667rem;
}

/* 侧边具体内容 */
.list-right .img {
    width: 7.6213rem;
    height: 2.2581rem;
    margin-top: .2667rem;
}

.list-right .img img {
    width: 7.6213rem;
    height: 2.2581rem;
}

.list-right h2 {
    font-size: .3413rem;
    /* margin-bottom: .2667rem; */

    color: #555;
    margin: .2667rem;
}

.ww li {
    width: 2.5333rem;
    height: 2.5333rem;
    /* background-color: lawngreen; */
    margin-bottom: .1333rem;
    text-align: center;
}

.ww li>p>img {
    width: 1.6rem;
    height: 1.6rem;
}

.ww li {
    font-size: .2933rem;
}

.ww {
    display: flex;
    flex-wrap: wrap;
}

/* 母婴专区 */

.box .kongbai {
    width: 7.6267rem;
    height: 8rem;
    background-color: #EDEDED;

}
.box{
margin-bottom: .8rem;

}

/* 底部 */
.footer ul {
    display: flex;
    justify-content: space-around;
}

.footer li {
    width: 2rem;
    height: 1.12rem;
    text-align: center;
}

.footer li a {
    text-decoration: none;
    color: #707070;
}

.footer p {
    font-size: .32rem;

}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 1.3rem;
    width: 10rem;
    background-color: #f7fcfe;
}

.dd {
    font-size: .5333rem;
}

.rrr {
    background-color: #E73C3C;
}


/* 点击时添加的类 */
.list-l .active{
    background-color: white;
    color: #E73C3C;
    border-left: 2px solid red;
}



.footer li .footer-red{
    color: red;
}
.iconfont{
    font-size: .5333rem;
}
.footer li .icon-red{
    color: #E51C23;
}

js代码

  //电梯导航
        const lis = document.querySelectorAll('.list-l li')
        const divs = document.querySelectorAll(' .list-right .box')

        lis.forEach((item, index) => {
            item.addEventListener('click', () => {
                document.querySelector('.list-l .active').classList.remove('active')
                item.classList.add('active')
                //页面被卷去的尺寸等于点击时对应div到顶部的距离-50
                document.documentElement.scrollTop = divs[index].offsetTop - 50
            })
        })

效果图

诗霖雪
关注
  • 12
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【jQuery】写一个电梯导航
m0_49442965的博客
01-05 225
在定义图片大小时，我因为习惯定义宽度，然后让高度自适应，但是这个导航就是根据每张图片距离页面顶部的高度来进行导航的，不定义高度，获取就出现问题。今天大概是跟着pink老师学习JS的第八天，看了有410章了。之后我打算自己练习一下，然后就出现bug了。还是那个熟悉的品优购项目。jQuery 电梯导航。
简简单单的电梯导航（前端）
qq_44822110的博客
02-23 1630
简简单单实现电梯导航 $(function(){ //首先实现到某个位置显示隐藏 $(window).on("scroll", function () { // 假如到lou1的位置显示 //获取lou1到定的距离并保存到变量lou1中 var lou1 = $(".lou1").offset().top; //到lou1位置的时候显示 ...
vue实现电梯锚点导航
weixin_42375707的博客
05-14 1473
vue实现电梯锚点导航
bilibili-navbar:B站首页右侧导航栏（左右联动电梯+排序）Vue实现
04-28
:blue_circle: bilibili-navbar Vue2实现B站首页右侧导航条 To-do List :check_mark_button: 滚动高亮 :check_mark_button: 返回顶部 :check_mark_button: 楼层切换 :check_mark_button: 楼层排序 :check_mark_button: 弹出层特效 :check_mark_button: 排序记录本地储存 待解决的问题 楼层排序拖动时，加一个offset而不用整个拖过上下楼层 拖动排序后，高亮的是最后点击排序的楼层，而不是当前页面所在位置的楼层 3. 拖拽事件只要在排序模式激活下绑定，退出后/组件销毁后解绑，需要优化性能 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production
JQuery实现电梯导航特效
越陌度阡
08-07 2303
分享一个基于JQuery实现的电梯导航效果，效果如下： 以下是代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <styl............
电梯导航（滚动监听）的实现
qq_18144239的博客
11-26 2814
在一些大型电商页面上，由于页面过于长，所以设计人员喜欢在侧边加上一个导航，然后点击可以快速导航到各个栏目，比如京东商城，这样不仅方便快捷，而且美观。 1.基本思路 相比轮播图，电梯导航貌似简单得多。 获取所有楼层的offsetTop值，放在一个数组里面。利用滚动事件监听window.offsetTop,并且判断是在数组中那两个数值区间之间，做出相应的效果。...
简易移动端响应导航页面
02-18
对于移动端导航，我们可以设置导航栏在小屏幕设备上堆叠显示： ```css /* 基础样式 */ nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } ...
vue开发移动端底部导航条功能
10-15
在Vue.js中开发移动端底部导航条功能是一项常见的任务，它能提供用户友好的界面和流畅的导航体验。本文将深入探讨如何使用Vue实现这一功能，包括组件化设计、路由链接和样式布局。 首先，我们来看一下`app.vue`中的...
6个移动端导航
06-28
[removed] $(function(){ $('.nav__trigger').on('click', function(e){ e.preventDefault(); $(this).parent().toggleClass('nav--active'); }); }) [removed]
HTML5移动端导航栏
10-15
在移动端导航栏中，`<nav>`标签通常用于包裹整个导航结构，表示页面的主要导航链接。 2. **响应式设计**：考虑到不同设备的屏幕尺寸和方向，一个优秀的HTML5移动端导航栏应具备响应式设计。通过使用CSS3的媒体查询...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 764
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 420
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 320
解决页面放大，图片模糊的问题
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 810
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 544
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
ReactRouter v6升级的步骤
feixin369的博客
07-14 406
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
高职软件技术实训室
最新发布
whwzzc的博客
07-17 742
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 168
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 300
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
H5移动端页面设计心得分享
03-03
去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。比如JDC的“拍拍十二星座实用手册”的项目，只用了最简单的图形和文字居中摆放。以可口可乐的这个“我们在这我们在乎”为例，相较而言，越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值