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. Masonry 在swift下的使用

    Masonry在oc下使用很方便,但是在swift下,由于oc方法和property都可以使用.fuc的语法,swift下只有属性可以使用.property的语法,方法只能写成.func().因此在s ...

  2. [Tool] Git 使用 与 Git Flow

    目录 简介 Git 命令 Git Flow 简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Lin ...

  3. oracle学习笔记(1)-三级模式SCHEMA

    oracle三级模式及二级映像 模式(schema)是数据库的一个名词,大部分的数据库在结构上都有三级模式的特征,了解下基本的概念,有助于后续深入的学习. 用老罗坚果pro发布会的话说就是,不罗嗦,先 ...

  4. php数组根据某键值，把相同键值的合并最终生成一个新的二维数组

    <?php $a=array( '0'=>array( 'id'=>'1', 'names'=>'jack', '0'=>'sendone' ), '1'=>arr ...

  5. 【hexo】如何在一个小时内搭载个人博客

    版权申明:本文为博主原创文章,未经博主允许不得转载.如需转载,请私聊博主. 什么是hexo Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351. 前期准备 安装 ...

  6. [leetcode-582-Kill Process]

    Given n processes, each process has a unique PID (process id) and its PPID (parent process id). Each ...

  7. 10.application对象

    1.application对象实现了用户数据的共享,可存放全局变量 2.application开始于服务器的启动,终止于服务器的关闭. 3.在用户的前后连接或不同用户之间的连接中,可以对applica ...

  8. C# 文字转换最简单的方法

    引用Microsoft.VisualBasic string text=Strings.StrConv("需要转换的文字", VbStrConv.TraditionalChines ...

  9. ionicangular 成长日记

    //首先配置文件ionic.bundle.min.jsionic.min.css" //创建一个angular控制器,控制器给body/html都可以angular.module('myap ...

  10. 使用JS开发桌面端应用程序NW.js-2-开发问题小记

    前言 本文为开发nw中遇到的各种问题,仅以记录供备忘以及遇到相同问题的人的一点点解决思路. 1. package.json中的window字段无效 原因:package.json中的window字段, ...