<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav-head</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
	    .head-nav{
	    	width:1200px;
	    	margin:0 auto;
	    	background:#373D41;
	    }
	    .head-nav ul{
	    	list-style:none;
	    	font-size:0px;
	    	position:relative;
	    }
	    .head-nav li{
           line-height:70px;
           padding:0 12px;
           display:inline-block;
	    }
	    .head-nav li a{
	    	color:#fff;
	    	font-size:16px;
	    	text-decoration:none;
	    	display:block;
	    	cursor:pointer;
	    }
	    .head-nav li a:hover{
	    	color:#ccc;
	    }
	    .head-nav li.line{
	    	position:absolute;
	    	width:0px;
	    	height:2px;
	    	background:#ccc;
	    	left:12px;
	    	bottom:10px;
	    	padding:0;
	    }
	</style>
</head>
<body>
	<div class="head-nav">
		<ul>
			<li><a href="#">最新活动</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">产品水电费</a></li>
			<li><a href="#">产品水电</a></li>
			<li><a href="#">产品</a></li>
			<li class="line"></li>
		</ul>
	</div>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script>
	   // 原生实现方式 使用了jQuery animate函数方式实现
       (function($,win){

       	    //获取当前元素的偏移量
       	    function getElementLeft(element){
       	    	var el = typeof(element) === "string" ? document.getElementById(element) : element;
       	    	return el.offsetLeft;
       	    }

      		var li = document.getElementsByTagName("li");
      		var line = document.getElementsByClassName("line");

      		for(var i=0; i<li.length; i++){
      				(function(i){
      					li[i].addEventListener("mouseenter",function(){
      						 var offsetLeft = getElementLeft(this);

      						 $(line[0]).stop().animate({
			            	  	 left:offsetLeft+"px",
			            	  	 width:li[i].offsetWidth + "px"
				             },50)
      						 // line[0].style.left = offsetLeft+"px";
      						 // line[0].style.width = li[i].offsetWidth + "px";
      					});

      					li[i].addEventListener("mouseleave",function(){
                               var offsetLeft = getElementLeft(this);
         					   $(line[0]).stop().animate({
	   			            	  	 left:offsetLeft+"px",
	   			            	  	 width:"0px"
   				               },280)
                               // line[0].style.left = offsetLeft+"px";
                               // line[0].style.width = "0px";
      					});
      				}(i))
      		}
       })(jQuery,window)

	</script>
</body>
</html>

　　

js实现 导航移入移出效果的更多相关文章

  1. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  2. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  3. CSS3的过渡效果，使用transition实现鼠标移入/移出效果

    在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...

  4. JS实现鼠标移入水波效果

    前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...

  5. antd card 组件实现鼠标移入移出效果

    鼠标移出: 鼠标移入: import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; cons ...

  6. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  7. html中如何实现表格移入移出时背景颜色改变？（两种方法）

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  8. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  9. element ui aside — 侧栏导航菜单移入移出折叠效果

    效果如图,移入移出控制折叠,点击按钮后移入移出不可控制折叠. 功能是很简单的功能,不过昨天这块还是弄了小一个小时,所以记录下来. 发现的问题: 模版上el-aside写上@mouseenter无效 解 ...

随机推荐

  1. css columns 与overflow结合的问题

    想实现上面这样分栏,并且溢出滚动的效果.可是自己下面的代码只能得到横向滚动条.觉得出现这个情况觉得还蛮有意思的,特地记录一下. <li v-for="(item,index) in s ...

  2. [洛谷P1939]【模板】矩阵加速（数列）

    题目大意:给你一个数列a,规定$a[1]=a[2]=a[3]=1$,$a[i]=a[i-1]+a[i-3](i>3)$求$a[n]\ mod\ 10^9+7$的值. 解题思路:这题看似是很简单的 ...

  3. [洛谷P2245]星际导航

    题目大意:有一张n点m边的带权无向图,和一些问题,每次询问两个点之间的路径的最大边权最小是多少. 解题思路:同NOIP2013货车运输,只是数据增大,大变成小,小变成大了而已.所以具体思路见货车运输. ...

  4. Kubernetes本地私有仓库配置

    实验环境 master 10.6.191.181 node1 10.6.191.182 node2 10.6.191.183 本地私有仓库 10.6.191.184 一.安装本地私有仓库 1.安装do ...

  5. Linux Shell脚本编程-基础2

    命令退出状态码  bash每个命令,执行状态都有返回值 0表示成功 非0表示失败(1-255) $?特殊变量可以打印出上一条命令的状态返回值 脚本的状态返回值是脚本执行的最后一条命令 自定义脚本状态返 ...

  6. mySQL主从复制实战

    随着访问量的不断增加,单台MySQL数据库服务器压力不断增加,需要对MYSQL进行优化和架构改造,MYQSL优化如果不能明显改善压力情况,可以使用高可用.主从复制.读写分离来.拆分库.拆分表来进行优化 ...

  7. Android后台进程与前台线程间的区别使用

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 很早就翻译过Android API的一篇文章Android高级 ...

  8. [Java开发之路]（6）File类的使用

    1. 构造方法 构造方法 描写叙述 File(String pathname) 通过将给定的路径名字符串转换为抽象路径名来创建一个新的文件实例. File(String parent , String ...

  9. bind DNS搭建笔记

    设置默认网关 偶尔会出现问题 route add default gw 192.168.0.1 .vim /etc/sysctl.conf 这里是重点 配置路由转发,路由开启等都要用到. # Cont ...

  10. UltraEdit Companion Utility

    UltraEdit Companion Utility 配色组件 http://www.danielwmoore.com/extras/index.php?action=downloads;sa=vi ...