<!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. 最简单的DES加密算法实现

    Base64.java package com.mstf.des; import java.io.UnsupportedEncodingException; /** * base64编码/解码 * @ ...

  2. （VC）搭建OpenGL编程环境

    1.下载glut工具包 opengl需要用到的库.下载glut: http://pan.baidu.com/s/1i4c8sHf 2.安装glut a)解压上面下载到的glut工具包后会得到5个文件, ...

  3. HDU I Hate It（线段树单节点更新，求区间最值）

    http://acm.hdu.edu.cn/showproblem.php?pid=1754 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分 ...

  4. tensorflow 问题库

    1.module 'tensorflow.python.ops.nn' has no attribute 'rnn_cell' 将tf.nn.rnn_cell ->tf.contrib.rnn

  5. SPOJ 7258 SUBLEX 后缀数组 + 二分答案 + 前缀和

    Code: #include <cstdio> #include <algorithm> #include <cstring> #define setIO(s) f ...

  6. Redis特点以及安装

       Mysql 的数据 是以"文件形式存储在硬盘"里边.硬盘运行速度相比较CPU.内存是排在第三的.而 Redis 是内存高速缓存数据库,运行速度比 Mysql 速度快,也支持数 ...

  7. bzoj1270 BeijingWc2008 雷涛的小猫 DP

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1270 比较水的一道dp f1[i]为高度为i的时候的最大值 f2[i]为当前高度在第i棵树 ...

  8. springMVC的rest风格的url请求

    rest是一个架构风格,用url来访问网络上的任何资源.rest的一种思想就是用http中的动作get,post,put,delete,来进行增删改查. 这里介绍的是springMVC的rest请求. ...

  9. ArcGIS api for javascript——使用图层定义显示地图

    描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...

  10. JAVA并发-内置锁和ThreadLocal

    上一篇博客讲过,当多个线程访问共享的可变变量的时候,可以使用锁来进行线程同步.那么如果线程安全性存在的3个前提条件不同时存在的话,自然就不需要考虑线程安全性了.或者说如果我们能够将某个共享变量变为局部 ...