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. java递归算法实现 数字人民币大写转换

    最近穷死了 ,没钱吃饭ing 写点钱给自己吧!public class Test{ public static String getChar(long a){ int b = (int)a; Map ...

  2. js数值使用及数组转json，转化后的json传入后台解析

    var storeArray=new Array(); $("input[name='storeid']").each(function(i){ var curStoreObj = ...

  3. C#实现手机发送验证码

    之前不怎么了解这个,一直以为做起来很复杂. 直到前两天公司要求要做这个功能. 做了之后才发现 这不过就是一个POST请求就能实现的东西.现在给大家分享一下,有不足之处还请多多指教. 废话不多说 直接上 ...

  4. 在win7下如何设置计划任务每一分钟执行一次

  5. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  6. sql将一列数据拼成一个字符串的方法

    SELECT STUFF(CONVERT(VARCHAR(500), ( SELECT TOP 10 ',' + BG_Country FROM dbo.BS_Budget FOR XML PATH( ...

  7. JavaScript学习笔记（三）——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  8. MySQL实例搭建

    Q:如何判断一个Linux系统具备安装MySQL的条件? A: 1.Linux网络已经配置完成 ip地址/子网掩码.默认网关.主机名字 /etc/hosts:访问这个数据库的应用的IP地址和主机名字也 ...

  9. IIS 反向代理 golang web开发

    一. beego 开发编译 bee run 后会编译成 exe文件 编译生成后发布文件结构为 cmd 运行 cd D:/run beegoDemo.exe run 默认配置端口 不能为 80 跟iis ...

  10. Django学习（七）---添加新文章页面

    在template中添加add_article.html页面 (form  input)请求方法使用post 这个页面涉及到了两个响应函数 1)显示页面的响应函数  2)表单提交的响应函数 add_a ...