<!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. php生成无限栏目树

    栏目数组:$arr=Array( Array('cid' => 2,'cname' => '新闻','pid' => 0),    Array('cid' => 4,'cnam ...

  2. WLAN HAL

      WLAN HAL WLAN 框架具有三个 WLAN HAL 表面,分别由三个不同的 HIDL 软件包表示: 供应商 HAL:Android 专用命令的 HAL 表面.HIDL 文件位于 hardw ...

  3. ubuntu 18.04网卡命名规则改回传统的ethx

    自15版本开始网卡命名规则就不叫eth0了.而是用可预期网络接口设备名称的命名规则,比如网卡名为enp3s0 . 如果想要变回ethx也是可以的,参考以下步骤: 1.编辑/etc/default/gr ...

  4. Hexo 与 Git 集成

    git初始化项目 登录Github,初始化GitHub Pages项目.即是添加一个Git Project. 点击New repository创建一个新的Project.需要填写选项如下:    -  ...

  5. java开发微信公众号支付（JSAPI）

    https://www.cnblogs.com/gopark/p/9394951.html,这篇文章写的已经很详细了. 下面写一下自己的思路: 1.首先下载demo,地址:https://pay.we ...

  6. 【BZOJ 1051】[HAOI2006]受欢迎的牛

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] Tarjan算法强连通缩点 . 最后出度为0的点. 如果只有一个. 那么这个"大点"所包含的点的个数就是答案了. ...

  7. Vmware qemu-kvm 虚拟化測试

    [root@kvm1 cloud]# lsmod | grep kvm kvm_intel 55496 3 kvm 337772 1 kvm_intel [root@kvm1 cloud]# egre ...

  8. URAL 1513. Lemon Tale(简单的递推)

    写几组数据就会发现规律了啊. .但是我是竖着看的.. .还找了半天啊... 只是要用高精度来写,水题啊.就当熟悉一下java了啊. num[i] = 2*num[i-1]-num[i-2-k]. 15 ...

  9. android YUV Sensor配置Camera应用的flash auto菜单

    请在Config.ftbl.flashlight.h (mediatek\custom\common\hal\flashlight\src)中. 将全部的两处凝视掉的code: //CameraPar ...

  10. Error 0x80070020 when you try to start a Web site in IIS 7.0

    https://support.microsoft.com/en-hk/help/973094/error-0x80070020-when-you-try-to-start-a-web-site-in ...