导航栏 navigator

最新推荐文章于 2021-06-18 09:27:42 发布

xjb许

最新推荐文章于 2021-06-18 09:27:42 发布

阅读量542

点赞数

分类专栏： javascript、排序

本文链接：https://blog.csdn.net/xjb19901008/article/details/26072513

版权

javascript、排序专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
       <title>navigator</title>
       <meta charset="utf8"/>
       <link type="text/css" rel="stylesheet" href="css/index.css"/>
       <script src="js/jquery-1.11.1.min.js"></script>
       <style>
       *{margin:0;padding:0;}
       ul{
       	z-index:300;
       	position:absolute;
       }
       ul li{
       	list-style: none;
       	float:left;
       	text-align:center;
       }

       ul li a{
       	padding:0 20px;
       	color:#413E4A;
       	text-align: bold;
       	text-decoration:none;
       }

       ul li a:hover{
       	color:#7A6A53;
       	text-decoration: none;

       }

       .active a{
       	color:#7A6A53;
       }

       .nav{
       	position: relative;
       	border:1px solid #d6d6d6;
       	background:#fff;
       	padding:15px;
       	height:18px;

       	/*div .nav style*/
       	-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
       	-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
       	border-radius:10px;
       	-moz-border-radius:10px;
       	-webkit-border-radius:10px;
       	background: -webkit-gradient(linear,left top,left bottom, from(rgb(240,240,240)),to(rgb(204,204,204)));
       	background: -moz-linear-gradient(top,rgb(240,240,240),rgb(204,204,204))
       }


       .floatr{
       	position:absolute;
       	top:10px;
       	z-index: 50;
       	width:80px;
       	height:30px;
       	border-radius:8px;
       	-moz-border-radius:8px;
       	-webkit-border-radius:8px;
       	background: rgba(255,255,255,.8);
       	transition:all .4s ease-in-out;
       	-webkit-transition:all .4s ease-in-out;
       	-moz-transition:all .4s ease-in-out;
       }
       </style>
	</head>
	<body>
       <div class="nav">
  		  <ul>
  		  	<li class="active tooltip" title="Home"><a href="">Home</a></li>
  		  	<li class="tooltip" title="web page"><a href="">web page</a></li>
  		  	<li title="CSS3" class="tooltip"><a href="">CSS3</a></li>
  		  	<li title="javascript"><a href="">Javascript</a></li>
  		  	<li><a href="">HTML5</a></li>
  		  	<li><a href="">DOM</a></li>
  		  	<li><a href="">BBS</a></li>
  		  	<li><a href="">jquery</a></li>
  		  </ul>
  		  <div class="floatr"></div>
       </div>
	</body>


<script>
$(function(){

	var dl = $('.nav li.active').offset().left - $('.nav').offset().left;
	var dwidth = $('.nav li .active').width() +"px";

	$('.floatr').css({
		"left":dl+"px",
		"width":dwidth
	});

	$('.nav li').hover(function(){
		 var left = $(this).offset().left - ($(this).parents('.nav').offset().left + 15);
        var width = $(this).width() + "px";
 
        //设置气泡水平移动动画，垂直移动为0
        var sictranslate = "translate(" + left + "px, 0px)";
 
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "-ms-transform": sictranslate,
            "-o-transform": sictranslate
        });
 
    },
 
    //hover out事件
    function() {
 
        //找到同胞元素中的激活的菜单项li，计算出left和width
      var left = $(this).siblings('li.active').offset().left - ($(this).parents('.nav').offset().left + 15);
        
        var width = $(this).siblings('li.active').width() + "px";
 
        //设置气泡水平移动动画，垂直移动为0
        var sictranslate = "translate(" + left + "px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate,
            "-ms-transform": sictranslate,
            "-o-transform": sictranslate
        });
 
    }).click(function () {
 
        //点击之后为当前点击菜单加上active类，同时移除其它菜单上的active类。
        $(this).siblings('li').removeClass('active');
 
        $(this).addClass('active');
 
        return false;
 
    });
 
	});



/*tooltips 这里的tips提示还是出现问题 暂时还没搞定 就是针对已经active的li选项时，tooltip失效*/


$(function(){
  var x=10;
  var y=20;
/*鼠标放上去的动作*/
  $("li.tooltip").mouseover(function(e){

    this.myTitle = this.title;
    this.title="";
    var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
    $("body").append(tooltip);

    $("#tooltip").css({
      "top":(e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    }).show("fast");
/*鼠标离开后的动作*/
  }).mouseout(function(){
    this.title=this.myTitle;
    $("div#tooltip").remove();

/*鼠标移动时的动作*/
  }).mousemove(function(e){
    $("#tooltip").css({
      "top": (e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    });
  });
});

</script>
</html>