<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

    <style type="text/css">

        #bg { background-color: rgb(102, 132, 228);}

    </style>

    <title></title>

    <!--<link href="css/nicenav.css" rel="stylesheet" />-->

    <!--<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>-->

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="js/jquery.nicenav.js" type="text/javascript"></script>

    <style type="text/css">

    	*{margin: 0;padding: 0;}

    	#container { width: 945px; height: 74px;  overflow: hidden; margin: auto; font-family: Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif; }

    	#container ul { height: 74px;}

    	#container li { display: block; float: left; width: 133px; height: 74px; background: url(../images/transparent.png); line-height: 32px; padding-right: 2px; line-height: 74px; list-style: none; }

        #container li a { color: #fff; text-decoration: none; display: block; position: relative; background: url(../images/black.png); width: 123px; height: 74px; padding-right: 10px; font-size: 14px; font-weight: bold; text-align: right; }

        #container li a:hover { background: #222; }

        #container li a span { display: block; position: absolute; left: 10px; top: 0; font-weight: normal; font-size: 10px; -webkit-text-size-adjust: none; opacity: 0.6; filter: alpha(opacity=60); }

		#buy { position: absolute; width: 133px; height: 2px; background: #e9d008; bottom: 0px; left: 0; }

    </style>

</head>

<body>

    <div id="bg">

        <div id="container">

            <ul id="nav" style="position: relative;">

                <li><a href="http://sc.chinaz.com/" target="_blank">Ʒ��<span>BRAND</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">�ſ�<span>OVERVIEW</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">��ֵ<span>WORTH</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">����<span>SUPPORT</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">����<span>UNIT</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">��װ<span>HARDCOVER</span></a></li>

                <li><a href="http://sc.chinaz.com/" target="_blank">��̬<span>NEWS</span></a></li>

                <div id="buy"></div>

            </ul>

        </div>

     </div>

     <hr>

    <!--<script type="text/javascript">

        $.nicenav(300);

    </script>-->

    <script type="text/javascript">

    	$(function(){

    		var lis = $('#nav>li'),

    			h = $('#buy')

    		$(lis).hover(function(){

    			var index =$(this).index();

    			console.log($(this).offset())

    			var offl=$(this).offset().left-$(this).width()

    			$(h).stop().animate({

                    'left': offl

    			},300)

    		},function(){

    			$(h).stop().animate({

                    'left': $(this).offset().left-$(this).width()

                }, 400);

    		})

    	})

    </script>

</body>

</html>

　　虽然很简单 也还是记录下，

插件方式

; (function ($) {

    $.extend({

        'nicenav': function (con) {

            con = typeof con === 'number' ? con : 400;

            var $lis = $('#nav>li'), $h = $('#buoy')

            $lis.hover(function () {

                $h.stop().animate({

                    'left': $(this).offsetParent().context.offsetLeft //context 在1.10中已经弃用

                }, con);

                console.log($(this))

                console.log($(this).offsetParent())

                console.log($(this).offsetParent().context)

            }, function () {

//              $h.stop().animate({

                    'left': '0'

                }, con);

            })

        }

    });

}(jQuery));

　这些事很长多网站常见的小功能，不要觉得很简单，有时要用时直接copy ，还是省时间的

导航栏 active 跟随鼠标效果的更多相关文章

  1. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  2. 导航栏 .active激活

    参考 :使用angularjs写一个导航栏控制器 1.点击其中一个li其他的class不影响 2.点击其中一个li其他的class影响 <!DOCTYPE html> <html l ...

  3. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  4. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  5. iOS导航栏自由缩放头像效果

    效果图: 上代码: 先给一个self.navigationItem.titleView ,然后再放个ImangeView添加到titleView上: UIView *titleView = [[UIV ...

  6. jQuery-鼠标经过显示大图并跟随鼠标效果方法封装

    //copyright c by zhangxinxu 2019-1-15 /*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图.仅支持png,gif,jpg,bmp四种格式的 ...

  7. day24—JavaScript实现导航栏底部引线跟随移动

    转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...

  8. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  9. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

随机推荐

  1. 开源ORM

    Farseer.net轻量级开源框架 目录 https://github.com/steden/Farseer.net ---------------------------------- SunSo ...

  2. 实现自己的ArrayList

    最近在学习数据结构和算法,书上有个ArrayList的简单实现,写的很不错. package cn.sp.test4; import java.util.Iterator; import java.u ...

  3. 配置yum源的步骤(阿里源)

    配置yum源的步骤1.可以移除默认的yum仓库,也就是删除 /etc/yum.repos.d/底下所有的.repo文件(踢出国外的yum源) 1.配置yum源,找到阿里云的官方镜像源地址 https: ...

  4. 数据结构 - 顺序队列的实行（C语言）

    数据结构-顺序队列的实现 1 顺序队列的定义 线性表有顺序存储和链式存储,队列作为一种特殊的线性表,也同样存在这两种存储方式.我们先来看队列的顺序存储结构. 队列的顺序储存结构:用数组存储队列,为了避 ...

  5. MyEclipse去除不必要的validation

    MyEclipse在构建项目时去除不必要的Valication可以加快构建速度. 操作: Window->Perferences->MyEclipse->Validation 在Va ...

  6. form表单ajaxSubmit提交并验证

    html: <form class="register-form" action="{:U('')}" method="post"&g ...

  7. AJPFX编写cmd界面下一键编译、执行java代码的bat脚本

    此脚本适合刚接触java的同学,在cmd界面下用jc取代 复杂的  javac *.java + java main使用说明:把脚本内容复制到txt文本中,修改后缀名为.bat,运行一次即可完成配置, ...

  8. js 宿主对象的属性和方法总结

    (1)属性:       //height,width;           a=document.documentElement.clientHeight;           //文档可视高度,由 ...

  9. time模块、datetime模块讲解

    time模块清楚三种格式的时间相互转换 import time# 时间分为三种格式#1.时间戳start= time.time()time.sleep(3)stop= time.time()print ...

  10. NavigationView的使用

    代码已经分享至github:https://github.com/YanYoJun/NavigationDemo 转载请注明原文链接:http://www.cnblogs.com/yanyojun/p ...