<!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. Maven的-pl -am -amd参数学习

    昨天maven的deploy任务需要只选择单个模块并且把它依赖的模块一起打包,第一时间便想到了-pl参数,然后就开始处理,但是因为之前只看了一下命令的介绍,竟然花了近半小时才完全跑通,故记录此文. 假 ...

  2. 基于dubbo2.5.5+zookeeper3.4.9的服务搭建

    参考资料:https://segmentfault.com/a/1190000009568509https://segmentfault.com/a/1190000004654903 0. 环境 Ja ...

  3. 【黑金教程笔记之005】【建模篇】【Lab 04 消抖模块之二】—笔记

    实验四和实验三的区别在于输出.实验三是检测到由高到低的电平变化时就拉高输出,检测到由低到高的电平变化时就拉低输出.而实验四检测到由高到低的电平变化时产生一个100ms的高脉冲.当检测到由低到高的电平变 ...

  4. jetbrains软件使用

    1.注册(有条件的话建议使用官方渠道注册https://www.jetbrains.com/store) 2018 license server http://idea.congm.in 2.禁用双击 ...

  5. 利用jenv安装maven, tomcat,zookeeper等

    jenv有关的网站: http://jenv.io https://github.com/gcuisinier/jenv 1.  执行jenv安装 $ curl -L -s get.jenv.io | ...

  6. bzoj 4070: [Apio2015]雅加达的摩天楼【spfa】

    明明是个最短路却有网络流一样的神建图= A = 首先要是暴力建图的话最坏有O(nm)条边.所以优化建图. 考虑分块思想,设bs=sqrt(n),对于p大于bs的,直接连边即可,最多有sqrt(n)条, ...

  7. Rabbitmq笔记二

    消息何去何从 mandatory 和 immediate 是 channel . basicPublish 方法中的两个参数,它们都有 当消息传递过程中不可达目的地时将消息返回给生产者的功能. 当 m ...

  8. CF1140G Double Tree

    题解 首先如果我们要确定出每个\(dis_{i \to i+1 , i \in odd}\) 这个可以用两遍树形\(DP\)来解决 一遍是考虑走子树子树绕过来的 一遍是考虑从走祖先绕过来的 然后就可以 ...

  9. [Usaco2012 Open]Balanced Cow Subsets

    Description Farmer John's owns N cows (2 <= N <= 20), where cow i produces M(i) units of milk ...

  10. Linux环境下使用yum安装zip和unzip

    Linux环境下使用yum安装zip和unzip. yum install zip yum install unzip