js实现 导航移入移出效果
<!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实现 导航移入移出效果的更多相关文章
- js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- CSS3的过渡效果,使用transition实现鼠标移入/移出效果
在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...
- JS实现鼠标移入水波效果
前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...
- antd card 组件实现鼠标移入移出效果
鼠标移出: 鼠标移入: import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; cons ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- html中如何实现表格移入移出时背景颜色改变?(两种方法)
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- element ui aside — 侧栏导航菜单移入移出折叠效果
效果如图,移入移出控制折叠,点击按钮后移入移出不可控制折叠. 功能是很简单的功能,不过昨天这块还是弄了小一个小时,所以记录下来. 发现的问题: 模版上el-aside写上@mouseenter无效 解 ...
随机推荐
- python note #1
To record my process of studying python and to practice my English meanwhile, I'd like to start writ ...
- Unity C# 设计模式(七)适配器模式
定义: 将一个类的接口转换成客户希望的另一个接口.adapter模式使得原本由于接口不兼容而不能在一起的那些类可以一起工作. 示例代码: 1.类适配器 /* Class Adapter:类适配器,这里 ...
- 移动端开发ios和安卓兼容问题
移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...
- COGS——T 21. [HAOI2005] 希望小学
http://www.cogs.pro/cogs/problem/problem.php?pid=21 ★★ 输入文件:hopeschool.in 输出文件:hopeschool.out ...
- 洛谷 P1769 淘汰赛制_NOI导刊2010提高(01)
P1769 淘汰赛制_NOI导刊2010提高(01) 题目描述 淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2^n-1,2^n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加 ...
- 洛谷 P1824 进击的奶牛
P1824 进击的奶牛 题目描述 Farmer John建造了一个有N(2<=N<=100,000)个隔间的牛棚,这些隔间分布在一条直线上,坐标是x1,...,xN (0<=xi&l ...
- ArcGIS api for javascript——地图配置-定制缩放动画,定制缩放框
描述 本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
- ArcGIS api for javascript——地图配置-定制导航箭头
描述 本例展示了如何为平移地图包括自定义的按钮.地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元.表格里剩余的单元放置标签为8个主要方向的缩写的按钮.每个按钮调用地图上不同的平移函数.例 ...
- C++学习笔记31,指向引用的指针(3)
我们来看一个简单的指向引用的指针的样例. #include <iostream> using namespace std; int main(){ int x=10; int y=20; ...
- 从Linux系统内存逐步认识Android应用内存
总述 Android应用程序被限制了内存使用上限,一般为16M或24M(具体看系统设置),当应用的使用内存超过这个上限时,就会被系统认为内存泄漏,被kill掉.所以在Android开发时,管理好内存的 ...