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. HTML4，HTML5，XHTML 之间有什么区别？

    原始日期:2014-10-25 14:12 我来从HTML的历史谈谈他们3者的区别.在HTML的早期发展中,W3C成立之前,很多标准的制定都是在浏览器的开发者们互相讨论的情况下完成的,比如HTML 2 ...

  2. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  3. 从一道例题谈Arrays.toString()与其他String的转换方法

    阅读该篇文章前,请大家事先阅读一下:   java.toString(),(String),String.valueOf的区别 有了上述基础后,我接下来谈谈从一道题目中获得的些许收获. 今天在做题是发 ...

  4. Linux: 安装和启用firefox浏览器的java

    之前在linux服务器上浏览一个网页时必须启用java才可以,但是自己只是一个服务器的普通用户,并没有root权限,所以只能把java装在自己的目录下面,因此不能用rpm包,而必须从Oracal官网下 ...

  5. 远程调用其它站点并设置cookie

    远程调用其它站点并设置cookie: 参考js var domainArray = [ {site:'g.com',action:'/b.do?c' } ,{site:'www.baidu.com', ...

  6. WPF编程-WPF体系结构

    WPF简介 Windows Presentation Foundation(WPF)是微软新一代图形系统,运行在.NET Framework 3.0架构下,为用户界面.2D/3D 图形.文档和媒体提供 ...

  7. 微信支付之统一下单--JAVA版

    都说微信支付有些坑,都抱怨微信支付的文档太烂,一会APPId,一会商户id,还有appsecret,支付API秘钥让你傻傻分不清楚,还有这里大写那里小写,几种标准,让你眼花缭乱.没错,这就是很多技术团 ...

  8. Vim按Esc后光标左移问题的解决

    参考了这篇文章http://vim.wikia.com/wiki/Prevent_escape_from_moving_the_cursor_one_character_to_the_left 在Vi ...

  9. PeopleCode事件和方法只用于online界面不能用于组件接口（component interface）

    在使用CI过程中,哪些方法是不能使用的.以下为PeopleBook解释的内容. 一.搜索框代码不执行:SearchInit, SearchSave, and RowSelect events 意味着使 ...

  10. vijos1080题解

    题目: 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回值1. 如果a>20 or b>20 or c>20就返回w(20,20 ...