<!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. Jquery 之deferred

    一.概述 在jquery中有种对象称之为延时对象,可以由 http请求方法$.get(), $.ajax(), $.post()  产生, 内置方法如下 也可以有jquery的延时方法 $.when( ...

  2. appium封装显示等待Wait类和ExpectedCondition接口

    此文已由作者夏鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用WebDriver做Web自动化的时候,org.openqa.selenium.support.ui中提供 ...

  3. Step 4: Install and Configure Databases

    https://www.cloudera.com/documentation/enterprise/latest/topics/cm_ig_installing_configuring_dbs.htm ...

  4. [转]广义正交匹配追踪(gOMP)

    广义正交匹配追踪(Generalized OMP, gOMP)算法可以看作为OMP算法的一种推广,由文献[1]提出,第1作者本硕为哈工大毕业,发表此论文时在Korea University攻读博士学位 ...

  5. 题解报告：hdu 1039 Easier Done Than Said?

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1039 Problem Description Password security is a trick ...

  6. C语言中Static和Const关键字的的作用 -- 转

    static作用:“改变生命周期” 或者 “改变作用域” 程序的局部变量存在于(堆栈)中,全局变量存在于(静态区 )中,动态申请数据存在于( 堆)中. 1.作用于变量: 用static声明局部变量-- ...

  7. Python variable 作用域和初始化

    Python 根据LEGB rule在不同的namespace中找变量 在def的函数中对global 变量做修改还是不推荐的,应该将其作为参数传入函数 try: do_something() cnt ...

  8. Sql Server把本地数据库传到服务器数据库

    上一篇文章我们已经把网站布署到服务器中了,如果是动态网站肯定是有数据库的,接下来通过Sql Server把本地数据库上传到服务器数据库中. 打开Sql Server连接本地数据库,选中要导出的数据库, ...

  9. Spring Mvc相关随笔

    web.xml部分 1.欢迎界面 <welcome-file-list> <welcome-file>/views/login.jsp</welcome-file> ...

  10. 死磕 java集合之LinkedList源码分析

    问题 (1)LinkedList只是一个List吗? (2)LinkedList还有其它什么特性吗? (3)LinkedList为啥经常拿出来跟ArrayList比较? (4)我为什么把LinkedL ...