<!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. 日前加拿大平板厂商 Datawind和印度运营商Reliance Communications日前宣布合作

    全球最便宜智能手机只要15美元 随着手机进入智能时代,这些年智能手机的发展可谓迅猛,苹果三星这样的手机厂商成为最大的受益者同时,低门槛也让越来越多的人开始意识到,全民智能时代确实要来了. 为了能让第三 ...

  2. 不再安全的 OSSpinLock

    自旋锁的本质是持续占有cpu,直到获取到资源.与其他锁的忙等待的实现机制不同. 昨天有位开发者在 Github 上给我提了一个 issue,里面指出 OSSpinLock 在新版 iOS 中已经不能再 ...

  3. 移动端 Modal 组件开发杂谈

    Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...

  4. mysql---union的使用方法

    union的作用非常easy用来合并两条sql的结果集 语法: SQL1 UNION SQL2 现有一张价格表 要求:求出价格低于2000和价格高于3000的商品.不能用or和not between- ...

  5. Beta分布从入门到精通

    近期一直有点小忙,可是不知道在瞎忙什么,最终有时间把Beta分布的整理弄完. 以下的内容.夹杂着英文和中文,呵呵- Beta Distribution Beta Distribution Defini ...

  6. 【Linux】JDK+Eclipse 搭建C/C++开发环境

    注:本文所提供的参考示例是在CentOS Linux环境下的安装,不保证适用于其他版本的Linux系统. ·    安装前的注意事项 编译源代码是需要对应的代码编译工具的,本文中安装的Eclipse只 ...

  7. SQL函数_Floor和Celling

    1 floor()函数用于获得小于或者等于数值表达式的最大整数,也就是向下取整;celling()函数用于获得大于或者等于数值表达式的最小整数,也就是向上取整: 2 floor()函数和round函数 ...

  8. Linux下搭建iSCSI共享存储详细步骤(服务器模拟IPSAN存储)

    一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够 ...

  9. C2mini 摄像头添加 到 7832N 录像机方法

    1.在YS7.com 把2个设备全部添加 (录像机也可以通过手机添加) 2.在录像机里添加摄像头 注: 如出现 “未知错误”可能为录像机版本过低造成.

  10. GridView单元格取值显示为&nbsp;

    在通过GridView取一个单元格(cell)的值时,数据库中为NULL,而页面上显示为空格.发现通过gridview.cell[i].text取出来的值为 ,导致获取数据出现问题. 解决方法: 一. ...