请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

jQuery两种方法实现电梯侧栏导航

个人博客 2020-12-07 10:47 互联网整合 70 直达下载地址
jQuery实现电梯侧栏导航方法一①引入jQuery库②引入电梯导航文件(附件下载)代码部分<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>左侧电梯演示</title><scripts...

jQuery实现电梯侧栏导航方法一

①引入jQuery库

②引入电梯导航文件(附件下载)

代码部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左侧电梯演示</title>
<script src="https://file.cbing.net/js/jquery.min.js"></script>
<script src="js/diantidaohang.js"></script>
<style>
*{margin:0;padding:0;}
body{height:6000px;}
.lift-nav{position:fixed;top:100px;left:30px;display:none;}
.lift-nav li{width:30px;height:30px;text-align:center;line-height:30px;color:#fff;padding:10px 10px;margin-bottom:10px;background:skyblue;cursor:pointer;}
.lift-nav li.current{background:tomato;}
.t1,.t2,.t3,.t4,.t5,.t6{width:800px;height:400px;text-align:center;line-height:400px;background:skyblue;margin:100px auto;font-size:30px;color:#fff;}
.t1{margin-top:200px;}
.t2{background:pink;}
.t3{background:tomato;}
.t4{background:grey;}
.t5{background:yellow;}
.t6{background:seagreen;}
</style>
</head>
<body>
<div class="lift-nav">
    <ul class="lift">
        <li>1楼</li>
        <li>2楼</li>
        <li>3楼</li>
        <li>4楼</li>
        <li>5楼</li>
        <li>6楼</li>
    </ul>
</div>
<div class="lift-target">
    <div class="t1">这是1楼</div>
    <div class="t2">这是2楼</div>
    <div class="t3">这是3楼</div>
    <div class="t4">这是4楼</div>
    <div class="t5">这是5楼</div>
    <div class="t6">这是6楼</div>
</div>
<script>
$(function(){
    LiftEffect({
        "control1":".lift-nav",
        "control2":".lift",
        "target":[".t1",".t2",".t3",".t4",".t5",".t6"],
        "current":"current"
    });
})
</script>
</body>
</html>

jQuery实现电梯侧栏导航方法二

①引入jQuery库

代码部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于JQuery实现电梯导航特效</title>
    <script src="https://file.cbing.net/js/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;font-family:'microsoft yahei';}
        #loutinav{width:35px;position:fixed;top:100px;left:50px;border:1px solid #ddd;display:none;}
        #loutinav ul li{width:35px;height:32px;border-bottom:1px dotted #DDDDDD;list-style:none;font-size:12px;text-align:center;position:relative;cursor:pointer;padding:10px 0;background:#918888;color:#fff;}
        #loutinav ul li span{width:35px;height:32px;padding:10px 0;position:absolute;top:0;left:0;}
        #loutinav ul li.last{background:#5e4a4a;color:#fff;border-bottom:1px solid #ddd;}
        #loutinav ul li.active span{background:#c00;color:#fff;display:block;}
        #loutinav ul li:hover span{background:#c00;color:#fff;display:block;}
        #header{width:1000px;height:1000px;background:#cc6633;margin:0 auto;font-size:50px;line-height:1000px;text-align:center;color:#000;}
        #main{width:1000px;background:#66ff66;margin:0 auto;}
        #main .louti{height:600px;width:1000px;font-size:50px;color:#fff;font-weight:bold;text-align:center;line-height:600px;}
        #footer{width:1000px;height:400px;background:red;margin:0 auto;font-size:50px;line-height:400px;text-align:center;color:#000;}
    </style>
</head>
<body>
<div id="loutinav">
    <ul>
        <li class="active"><span>享品质</span></li>
        <li><span>服饰美妆</span></li>
        <li><span>电脑数码</span></li>
        <li><span>3C运动</span></li>
        <li><span>爱吃</span></li>
        <li><span>母婴居家</span></li>
        <li><span>图书汽车</span></li>
        <li><span>虚拟</span></li>
        <li><span>还没逛够</span></li>
        <li class="last">顶部</li>
    </ul>
</div>
<div id="header">向下滚动鼠标查看效果</div>
<div id="main">
    <div class="louti" style="background:#cc0033;">享品质</div>
    <div class="louti" style="background:#999933;">服饰美妆</div>
    <div class="louti" style="background:#ccff33;">电脑数码</div>
    <div class="louti" style="background:#006633;">3C运动</div>
    <div class="louti" style="background:#6666cc;">爱吃</div>
    <div class="louti" style="background:#ff6600;">母婴居家</div>
    <div class="louti" style="background:#ffff00;">图书汽车</div>
    <div class="louti" style="background:#3333ff;">虚拟</div>
    <div class="louti" style="background:#ff00cc;">还没逛够</div>
</div>
<div id="footer">网站底部</div>
<script>
    $(function (){
        $(window).on('scroll', function (){
            var $scroll = $(this).scrollTop();
            // 显示楼层标签
            if ($scroll >= 800){
                $('#loutinav').show();
            } else{
                $('#loutinav').hide();
            }
            // 拖动滚轮,点亮对应的楼层标签
            $('.louti').each(function (){
                var $loutitop = $('.louti').eq($(this).index()).offset().top + 400;
                // 楼层的top大于滚动条的距离
                if ($loutitop > $scroll){
                    $('#loutinav li').removeClass('active');
                    $('#loutinav li').eq($(this).index()).addClass('active');
                    // 中断循环
                    return false;
                }
            });
        });
        // 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置  
        var $loutili = $('#loutinav li').not('.last');
        $loutili.on('click', function (){
            $(this).addClass('active').siblings('li').removeClass('active');
            var $loutitop = $('.louti').eq($(this).index()).offset().top;
            // 获取每个楼梯的offsetTop值
            // $('html,body')兼容问题body属于chrome
            $('html,body').animate({
                scrollTop:$loutitop
            })
        });
        // 回到顶部
        $('.last').on('click', function (){
            // $('html,body')兼容问题body属于chrome
            $('html,body').animate({
                scrollTop:0
            })
        });
    })
</script>
</body>
</html>

 

普通下载地址:
jQuery电梯导航

常见问题FAQ

免费下载或者专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担,本站不承担任何责任。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可直接联系我们。
模板/插件不会安装或需要功能定制以及二次开发?
QQ或者微信联系我们。

本文转载:互联网整合

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:jQuery两种方法实现电梯侧栏导航

本文地址:https://www.cbing.net/daima/11.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1