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. VMWare、KVM、Virtualbox克隆或复制Linux虚拟机后eth0找不到的解决方案

    快速处理办法: cat /etc/sysconfig/network-scripts/ifcfg-eth0 sed -i '/UUID/d' /etc/sysconfig/network-script ...

  2. Service 中添加同步块防止并发 重复

    Service 中添加同步块防止并发 重复. synchronized(this){}

  3. Angular4 后台管理系统搭建（1） - 建立一个通用的Wijmo5 flexgrid分页器组件

    17年4月,开始学习angular2,到5月跟着升级到angular4.目前还在学习,搭建中.我的最终目的是用angular4框架搭建一个后台管理系统.这里使用了三个关键的外部库. 1.使用admin ...

  4. java执行程序的内存分析系列专栏二之static变量和方法内存分析

    昨天写了简单的聊了下java执行程序时简单的内存划分,今天我们接着往下聊,聊聊static变量和方法的内存分析. 1.static变量和方法的第一个特性内存分析 statiic变量和方法的第一个特性能 ...

  5. Reflect（反射）

    反射.反射,程序员的快乐.反射是无处不在的. 那么什么是反射:通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指 ...

  6. JVM总结之命令行工具

    jps jps位于jdk的bin目录下,其作用是显示当前系统的java进程情况,及其id号. jps相当于Solaris进程工具ps.不象"pgrep java"或"ps ...

  7. Python之编写登陆接口

    1.输入用户名密码: 2.认证成功后显示欢迎信息: 3.错误三次后,账号被锁定. 账号文件:user.txt 锁定文件:locked.txt 流程图如下: # -*- coding:utf-8 -*- ...

  8. 第二章：2.8 通过Django 在web页面上面输出 “Hello word ”

    1. 第一步:配置 guest 目录下面的 settings.py 文件, 将 sign应用添加到 guest项目中. 2. 在 guest目录下面,打开 urls.py 文件,添加 要打开的路由文件 ...

  9. Visual Studio自动添加头部注释 -C#开发2010-2013验证

    在团队开发中,头部注释是必不可少的.但在开发每次新建一个类都要复制一个注释模块也很不爽,所以得想个办法让开发工具自动生成我们所需要的模板.....操作方法如下: 找你的vs安装目录, 比如我的是在D盘 ...

  10. Spring+SpringMVC+MyBatis深入学习及搭建(十三)——SpringMVC入门程序（二）

    1.非注解的处理器映射器和适配器 1.1非注解的处理器映射器 前面我们配置的org.springframework.web.servlet.handler.BeanNameUrlHandlerMapp ...