jQuery防京东浮动网站楼层导航代码

 
<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

<title>jQuery防京东浮动网站楼层导航代码</title>

    <script src="admin/js/jquery-1.8.0.min.js"></script>

<script>

    $(function () {

        // @ 给窗口加滚动条事件

        $(window).scroll(function () {

            // 获得窗口滚动上去的距离

            var ling = $(document).scrollTop();

            // 在标题栏显示滚动的距离

            document.title = ling;

            // 如果滚动距离大于1534的时候让滚动框出来

            if (ling > 1534) {

                $('#box').show();

            }

            if (1534 < ling && ling < 2300) {

                // 让第一层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏

                $('#box ul li').eq(0).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(0).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 3020) {

                $('#box ul li').eq(1).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(1).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 3595) {

                $('#box ul li').eq(2).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(2).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 4170) {

                $('#box ul li').eq(3).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(3).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 4885) {

                $('#box ul li').eq(4).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(4).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 5460) {

                $('#box ul li').eq(5).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(5).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 6035) {

                $('#box ul li').eq(6).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(6).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 6645) {

                $('#box ul li').eq(7).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(7).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 7360) {

                $('#box ul li').eq(8).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(8).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 7905) {

                $('#box ul li').eq(9).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(9).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            } else if (ling < 8790) {

                $('#box ul li').eq(10).find('.num').hide().siblings('.word').css('display', 'block');

                $('#box ul li').eq(10).siblings('li').find('.num').css('display', 'block').siblings('.word').hide();

            }

            if (ling > 8800 || ling < 1534) {

                // $('#box').css('display','none');  // @ 这一句和下一句效果一样。

             //   $('#box').hide();

            }

        })
　　　　　　//楼层点击事件 定位到楼层

        $(".word").click(function () {

            var id = $(this).attr("data-id");

            var h = $("#item-" + id).offset().top;

            $('body,html').animate({ scrollTop: h }, 200);

        });

    })

    $(function () {

        $('#box ul li').hover(function () {

            $(this).find('.num').hide().siblings('.word').css({ 'display': 'block', 'background': '#CB1C39', 'color': 'white' });

        }, function () {

            $(this).find('.num').css({ 'display': 'block', 'background': 'white', 'color': '#666' }).siblings('.word').hide().css({ 'display': 'none', 'background': '', 'color': '' });

        })

    })

</script>

    <style>

    *{

        margin: 0px;

        padding: 0px;

        font-size: 12px;

    }

    li,a{

        list-style-type: none;

        text-decoration: none;

    }

    #box{

        position: fixed;

        left: 30px;

        top: 160px;

        display: none;

    }

    #box ul li{

        width: 30px;

        height: 30px;

        line-height: 30px;

        border: 1px dotted #666;

        text-align: center;

        border-bottom:none;

    }

    #box ul li.last{

        border-bottom: 1px dotted #666;

    }

    #box ul li .num{

        color: #666;

        /*display: none;*/

    }

    #box ul li .word{

        display: none;

        color: #CB1C39;

    }

    .item {

        width: 1000px;

        margin: 0 auto 30px auto;

        height: 750px;

        border:1px solid #808080;

    }

</style>

</head>

<body>

<div id="box">

    <ul>

        <li><a class="num" href="javascript:;" style="display:none">1F</a><a class="word" href="javascript:;" style="display:block" data-id="0">服装</a></li>

        <li><a class="num" href="javascript:;">2F</a><a class="word" href="javascript:;" data-id="1">美妆</a></li>

        <li><a class="num" href="javascript:;">3F</a><a class="word" href="javascript:;" data-id="2">手机</a>

        </li><li><a class="num" href="javascript:;">4F</a><a class="word" href="javascript:;" data-id="3">家电</a></li>

        <li><a class="num" href="javascript:;">5F</a><a class="word" href="javascript:;" data-id="4">数码</a></li>

        <li><a class="num" href="javascript:;">6F</a><a class="word" href="javascript:;" data-id="5">运动</a></li>

        <li><a class="num" href="javascript:;">7F</a><a class="word" href="javascript:;" data-id="6">居家</a></li>

        <li><a class="num" href="javascript:;">8F</a><a class="word" href="javascript:;" data-id="7">母婴</a></li>

        <li><a class="num" href="javascript:;">9F</a><a class="word" href="javascript:;" data-id="8">食品</a></li>

        <li><a class="num" href="javascript:;">10F</a><a class="word" href="javascript:;" data-id="9">图书</a></li>

        <li class="last"><a class="num" href="javascript:;">11F</a><a class="word" href="javascript:;" data-id="10">服务</a></li>

    </ul>

</div>

   <div class="item" id="item-0">1</div>

   <div class="item" id="item-1">2</div>

    <div class="item" id="item-2">3</div>

    <div class="item" id="item-3">4</div>

    <div class="item" id="item-4">5</div>

      <div class="item" id="item-5">6</div>

    <div class="item" id="item-6">7</div>

    <div class="item" id="item-7">8</div>

      <div class="item" id="item-8">9</div>

    <div class="item" id="item-9">10</div>

    <div class="item" id="item-10">11</div>

</body>

</html>
 
 

jQuery防京东浮动网站楼层导航代码的更多相关文章

  1. JS实现网站楼层导航效果

     壹 ❀ 引 我在angularjs中使用锚点这篇文章中,踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能:但对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导 ...

  2. jQuery绿色下拉网站导航

    jQuery,下拉菜单,网站导航,绿色导航,菜单导航,jQuery绿色下拉网站导航是一款基于jquery实现的鼠标滑过下拉显示二级菜单. jquery特效代码:http://www.huiyi8.co ...

  3. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  4. css009 装饰网站的导航

    css009 装饰网站的导航 1.         选择定义样式的链接 1.连接的状态: A.未访问  a:link{C;} B.已访问  a:visited{ color : red; } C.鼠标 ...

  5. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  6. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  7. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  8. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  9. 网站全局js代码

    这几天开始看公司的一套系统,整理的网站全局js代码 /*文件名:base.js功能说明:全站通用的全局变量及公用方法创建日期:2010-09-26*///引入jquery库文件document.wri ...

随机推荐

  1. 使用Swagger实现webapi接口自动化文档生成

    这里是实现自动化api稳当的生成,在网上看了很多swagger的文档,可能都是在为实现接口时直接使用的swagger,其实步骤差不多,但是更加详细的我还没看到,又或者说,我看着文档来的时候还是出错啦, ...

  2. Kafka 源代码分析之ByteBufferMessageSet

    这里分析一下message的封装类ByteBufferMessageSet类 ByteBufferMessageSet类的源代码在源代码目录message目录下.这个类主要封装了message,mes ...

  3. ASP.NET WEB API 自定义模型校验过滤器

    对外公开WEB接口时,对模型校验是常见的安全常识,常见的写法是在controller中判断ModelState.IsValid,以注册用户API为例. Model: public class Regi ...

  4. linux vim编辑

    常用vim操作自我总结,大神请回避: vim 打开退出保存 打开:直接打开 vim practice_1.txt也可以先打开vim,后:e 文件路径 保存::w 文件名或者退出保存:wq! 普通模式下 ...

  5. React Image加载图片过大导致ListView滑动卡顿

    今天莫名的发现ListView加载Item很卡,一顿一顿的... ListView Item 中只加载一张图片,小编从百度爸爸上随便复制的链接,这张图片很大,以致埋下如此大坑... Image的Sty ...

  6. Vijos 1981 跳石头 二分

    描述 一年一度的"跳石头"比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩 ...

  7. CentOS6.4虚拟机设置固定IP、安装JDK、Tomcat、Redis并部署web项目

    一.CentOS设置固定IP 1.直接修改配置文件的方式,原文地址:http://www.cnblogs.com/zhja/p/3964159.html (1)首先获取你的GATEWAY 方便后面在c ...

  8. angular popover的触发问题；

    popover 一般如下用法; <div uib-popover="内容" popover-animation="false" popover-appen ...

  9. gulp总结

    安装 1.安装node 检测是否安装成功的方法,在命令行输入: node -v npm -v 显示版本号则安装成功 2.装cnmp一定要网络好一点 npm install cnpm -g --regi ...

  10. Mysql连接出错问题

    1.java 提示:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 处理:导入mysql-connector-java-5.1.7-bi ...