jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

2024-09-27 17:29:51

效果图

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .navfix {
            display: none;
            width: 1200px;
            height: 30px;
            background-color: pink;
            position: sticky;
            top: 0px
        }

        .goodetem,
        .contain1 {
            width: 1200px;
            height: 500px;
            background-color: red;
        }

        .contain1 {
            height: 300px;
            background-color: rgb(226, 111, 130);
        }

        .youlike {
            width: 1200px;
            height: 1800px;
            background-color: skyblue;
        }

        a {
            text-decoration: none;
            color: black
        }

        .bar a {
            display: block;
            width: 80px;
            height: 80px;
            background-color: grey;
            text-align: center;
            line-height: 40px;
        }

        .bar {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 1210px;
            top: 200px;
        }

        a:hover {
            color: orange
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="top1" style="background-color:blue;width:1200px;height:60px;"></div>
        <div class="navfix"></div>
        <div class="contain1"></div>
        <div class="goodetem"></div>
        <div class="youlike"></div>
        <div class="bar">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="pinzhi">品质<br>好货</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="like">猜你<br>喜欢</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="top" style="display:none">顶部</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >反馈</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >暴恐<br>举报</a>
        </div>
    </div>
    <script>
        $(function() {
            // console.log($('.bar').offset().top);
            // console.log($('.bar').offset().left);

            var a = $('.bar').offset().left
            $(window).scroll(function() {
                    console.log($('document, html').scrollTop());
                    if ($('document, html').scrollTop() >= $('.bar').offset().top) {
                        $('.bar').css('position', 'fixed')
                        $('.bar').css('top', 0)
                        $('.bar').css('left', a)
                    }
                    if ($('document, html').scrollTop() < 200) {
                        $('.bar').css('position', 'absolute')
                        $('.bar').css('top', 200)
                        $('.bar').css('left', 1210)
                    }
                    if ($('document, html').scrollTop() >= 300) {
                        $('.top').css('display', 'block')
                    } else {
                        $('.top').css('display', 'none')
                    }
                    if (
                        $('document, html').scrollTop() >= 65
                    ) {
                        $('.navfix').css('display', 'block')
                    } else {
                        $('.navfix').css('display', 'none')
                    }
                })
                //添加bar的点击事件，返回到相应的位置上去
                //优化，应该给每个小模块添加一个索引号，与大盒子相对应，一开始将所有的模块一起添加一个点击事件，再回到相对应大盒子的位置
            $('.top').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 0
                })
            })
            $('.pinzhi').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 358
                })
            })
            $('.like').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 888
                })
            })
        })
    </script>
</body>

</html>

品优购电梯导航效果：

1、当滚动到今日推荐模块，就让电梯导航显示出来

2、点击电梯导航页面可以滚动到相应的内容区域

没必要每个模块都加一个点击事件

1、核心：电梯导航模块和内容区模块是一一对应的

根据左侧小盒子的索引号来找相应的大盒子

console.log($(this).index()); //获取点击的索引号

console.log($('.folr div').eq($(this).index())); //获取与索引号相对应的内容

2、当点击电梯导航某个小模块，就可以拿到当前小模块的索引号

3、就可以把animate要移动的距离求出来：当前索引号内容区模块他的offset（）.top

4、当页面滚动到内容区域的某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类

1、这个功能是在页面滚动的时候触发的，因此需要写在页面滚动事件里面

2、需要用到each，遍历内容区域大模块，each里面能拿到内容区域每一个模块元素和索引号

3、判断条件：被卷去的头部大于等于内容区域里面每个模块的offset（）.top。

4、利用这个索引号找到相应的电梯导航小li添加类

bug：

1、当点击小li，执行动画的时候，不需要执行页面滚动事件里面li的背景选择，不加类名--节流阀（互斥锁） var flag = true 通过多加一个判断条件来实现当animate执行完之后，就打开页面滚动里面li的背景选择（回调函数）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            margin: 10px auto;
            position: relative;
        }

        .hoomtool,
        .phone,
        .diannao,
        .jiayodianqi,
        .shenghuo {
            width: 600px;
            height: 800px;
        }

        .hoomtool {
            background-color: pink;
        }

        .phone {
            background-color: red;
        }

        .diannao {
            background-color: blue;
        }

        .jiayodianqi {
            background-color: grey;
        }

        .shenghuo {
            background-color: skyblue;
        }

        a {
            text-decoration: none;
            color: black;
            font-size: 25px;
        }

        .bar {
            width: 140px;
            position: fixed;
            top: 300px;
            left: 20px;
            display: none;
            margin: 0px;
            padding: 0px;
        }

        ul {
            padding: 0px;
        }

        li {
            list-style: none;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .nav {
            height: 400px;
            background-color: purple;
        }

        .tuijian {
            height: 50px;
            background-color: rgb(121, 97, 97)
        }

        .current {
            background-color: red;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="nav"></div>
        <div class="tuijian" class="dff">今日推荐</div>
        <!-- 单独包括再一个大盒子里面，便于索引--内容区域 -->
        <div class="folr">
            <div class="hoomtool">家用电器</div>
            <div class="phone">手机通讯</div>
            <div class="diannao">电脑办公</div>
            <div class="jiayodianqi">家居家具</div>
            <div class="shenghuo">生活用品</div>
        </div>
        <div class="bar">
            <ul>
                <li class="current"><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >家用电器</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >手机通讯</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >电脑办公</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >家居家具</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >生活用品</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            var flag = true
            var a = $('.tuijian').offset().top
                // console.log(a);
            $('.bar').fadeOut()
            $(window).scroll(function() {
                    //1、导航栏的显示与隐藏
                    if ($('document, html').scrollTop() >= a) {
                        $('.bar').fadeIn()
                    } else {
                        $('.bar').fadeOut()
                    }
                    //4、当页面滚动到内容区域的某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
                    if (flag == true) {
                        $('.folr div').each(function(index, eld) {
                            // console.log($(eld).offset().top);
                            if ($('document, html').scrollTop() >= $(eld).offset().top) {
                                $('ul li').eq(index).addClass('current')
                                $('ul li').eq(index).siblings().removeClass('current')
                            }
                        })

                    }

                })
                //2、电梯对应效果
            $('ul li').click(function() {
                console.log($(this).index()); //获取点击的索引号
                //每次点击li，就需要计算页面要去往的位置
                //选出对应索引号内容区的盒子
                console.log($('.folr div').eq($(this).index())); //获取与索引号相对应的内容
                flag = false
                    // $('document,html').scrollTop($('.folr div').eq($(this).index()).offset().top)//要添加动画效果（动画滚动效果）
                $('document,html').animate({
                        scrollTop: $('.folr div').eq($(this).index()).offset().top
                            //只要一滚动就会触发上面的滚动事件
                    }, function() {
                        flag = true
                    })
                    //3、点击之后让当前的li添加current类名，兄弟则移除类名
                $(this).addClass('current')
                $(this).siblings().removeClass('current')

            })
        })
    </script>
</body>

</html>

以上就是jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)的详细内容，更多关于jQuery导航栏的资料请关注我们其它相关文章！

jQuery实现带展开动画的导航栏效果

设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏. HTML写布局,CSS写样式,JS写动画效果和事件响应等,考虑到JQuery对DOM操作的便利性,这里选择用JQuery可以达到事半功倍的效果. 设计: 如果觉得自己下载的一些导航栏插件太千篇一律了,那么就设计一个自己喜欢的导航栏.可以先拿张纸画画自己希望要一个什么样的导航最终想要达到什么样的效果. 比如
jquery实现滑动楼梯效果

本文实例为大家分享了jquery实现滑动楼梯效果的具体代码,供大家参考,具体内容如下思路:鼠标滚动的时候页面跟随变化,点击模块时候,实现指哪打哪效果代码的实现 1.html和css代码 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ padding: 0; mar
jQuery滑动效果实现方法分析

本文实例讲述了jQuery滑动效果实现方法.分享给大家供大家参考,具体如下: jQuery 滑动方法: 1.slideDown()方法:用于向下滑动元素语法: $(selector).slideDown(speed,callback); 2.slideUp()方法:用于向上滑动元素语法: $(selector).slideUp(speed,callback); 3.slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换. 语法: $(selector
jQuery蓝色风格滑动导航栏代码分享

这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo
jQuery实现滑动tab选项卡

本文实例为大家分享了jQuery实现滑动tab选项卡的具体代码,供大家参考,具体内容如下先上最终效果: 需求分析: 1.选项卡菜单数量不固定,菜单内容不固定,导致了单个菜单和整体的宽度都是未知的, 2.第一个需求导致滑块宽度也是不固定的 3.为了让交互效果更好,滑块需要添加过度动画对滑块的需求导致滑块和菜单的html结构必须分离,并使用了jQuery的offset方法获取并设置位置,所有的div都使用了相对定位. 本案例的TAB选项卡可以比较方便的拓展.重复使用,只需修改少量值就可以直接食用
jquery+css实现侧边导航栏效果

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a
jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

效果图实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
jQuery实现级联菜单效果(仿淘宝首页菜单动画)

相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧. 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码复制代码代码如下: <!DOCTYPE html> <html> <head> <title>menu.html</title> <m
基于Jquery插件开发之图片放大镜效果(仿淘宝)

需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

功能很实用,代码非常的简单效果1. 效果2. 样式代码如下: 复制代码代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decorat
swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下效果如图: 首先引入swiper的css和js文件官网下载地址 <link href="swiper.min.css" rel="stylesheet"> <script src="swiper.min.js"></script> html结构部分 <body> <div class="tab">
bootstrap自定义样式之bootstrap实现侧边导航栏功能

bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,
微信小程序实现侧边导航栏

本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下效果图 wxml <view class='productNav'>  <view class='left'> <view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>为您推荐</view>
JQuery Mobile实现导航栏和页脚

导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g
基于jQuery实现顶部导航栏功能

今天给大家介绍一下,如何利用jQuery实现顶部导航栏功能.其实原理很简单就是利用css和JQuery样式选择器实现的. 下面举个例子具体介绍一下如何这些功能,案例如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery三级下拉列表导航菜单</title> <

jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

相关推荐

随机推荐