<!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. asp.net MVC Model 类的主键 int类型、string类型、GUID类型。

    在使用asp.net mvc进行定义 模型类的时候,一般情况下,我们都会定义一个属性为 int iD{get;set;} 或为int ClassNameID {get;set;},在这种情况下 1.I ...

  2. Sql Server 查询重复记录

    参考网址:http://database.51cto.com/art/201103/250046.htm SQL Server数据库多种方式查找重复记录 select * from dbo.T0058 ...

  3. Ruby  Hash类

    Hash类 更新:2017/06/15 获取没有的哈希值时返回nil 更新:2018/01/03 增加merge! 更新: 2018/04/05 增加搜索 key 更新: 2018/04/30 增加e ...

  4. Linux 常用命令八 find

    一.find命令 find命令用于查找文件. 按文件名字查找: wang@wang:~/workpalce/python$ sudo find / -name "create.txt&quo ...

  5. poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】

    扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...

  6. JAVA值传递和引用传递 以及 实参是否改变

    八大数据类型和String 在进行传递的时候  不会改变. 八大数据类型 public class parameterValue { //值传递 public static void main(Str ...

  7. ROS学习笔记二：ROS系统架构及概念

    本文主要是了解ROS的系统架构.文件夹结构以及工作所需的核心文件. ROS系统架构主要被设计和划分为三部分,每一部分代表一个层级的概念:文件系统级(The filesystem level).计算图级 ...

  8. 题解报告：hdu 1230 火星A+B（字符串）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1230 Problem Description 读入两个不超过25位的火星正整数A和B,计算A+B.需要 ...

  9. JetSpeed2部署至Apusic操作步骤记录

    JetSpeed2部署至Apusic操作步骤记录. 1.创建Apusic新域,配置端口.管理端口和管理密码. 2.将Tomcat/lib目录中的所有jar包复制至Apusic域中的lib目录中(包括数 ...

  10. 424 Longest Repeating Character Replacement 替换后的最长重复字符

    给你一个仅由大写英文字母组成的字符串,你可以将任意位置上的字符替换成另外的字符,总共可最多替换 k 次.在执行上述操作后,找到包含重复字母的最长子串的长度.注意:字符串长度 和 k 不会超过 104. ...