js实现的动画导航菜单效果代码
本文实例讲述了js实现的动画导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款简单的动画导航菜单效果，每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动，指明当前菜单的位置。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-animate-nav-menu-style-codes/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动画导航菜单</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{margin:0; padding:0;}
body { font:12px "\5B8B\4F53",san-serif; color:#808080; padding-top:6px; }
a { text-decoration:none; color:#808080 }
a:hover { text-decoration:underline; color:#ba2636 }
ul, li { list-style:none; }
#nav{ padding:41px 0 0 0; height:27px;width:542px; overflow:hidden; float:right; margin-right:17px;position:relative ;}
#nav ul{ height:27px; width:100%; background: url(i/naVbotBdr.gif) repeat-x 0 100%; }
#nav ul li{ width:67px; height:24px; float:left; padding-right:28px; display:inline; cursor:pointer; overflow:hidden}
#nav a{background:#999;width:100%; height:24px; display:block; float:left; outline:none; color:#fff; line-height:24px; text-align:center; font-size:16px; font-weight:bold; overflow:hidden}
#navCur{ position:absolute; left:0; bottom:0; height:3px; color:#F00; width:67px; margin:0; padding:0; display: block; float:none; background:#FF0000; cursor:pointer; overflow:hidden}
</style>
</head>
<body>
<div id="nav">
<ul class="cf">
<li><a href="" hidefocus="true">1</a></li>
<li><a href="1" hidefocus="true">2</a></li>
<li class="cur"><a href="2" hidefocus="true">3</a></li>
<li><a href="3" hidefocus="true">4</a></li>
<li><a href="4" hidefocus="true">5</a></li>
<li><a href="5" hidefocus="true">6</a></li>
</ul>
<span id="navCur"></span>
</div>
<script type="text/javascript">
(function(){
var curPostion,thisLeft, curPostion_1;
var obj = getId('nav').getElementsByTagName('ul')[0], timer = null ,navCur = getId('navCur'),x,liArr = getId('nav').getElementsByTagName('li'),liLength = liArr.length-1;
for (var x=0;x<liArr.length; x++ ){
liArr[liLength].style.paddingRight = "0";
var li = liArr[x],curPostion = navCur.offsetLeft;
if(li.className == "cur"){
navCur.style.left = li.offsetLeft + "px";
}
li.onmouseover=function(){
clearTimeout(timer);
thisLeft = this.offsetLeft;
if (thisLeft > navCur.offsetLeft)
{
hover();
}
else
{
curPostion_1 = this.offsetLeft;
out();
}
};
li.onmouseout=function(){
clearTimeout(timer);
if (curPostion < navCur.offsetLeft)
{
curPostion_1 = curPostion;
out();
}
else
{
thisLeft = curPostion;
hover();
}
};
}
function hover(){
if (navCur.offsetLeft <= thisLeft)
{
var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15), 3);
navCur.style.left = navCur.offsetLeft + a + "px";
timer = setTimeout(arguments.callee, 5);
}
else
{
navCur.style.left = thisLeft + "px";
clearTimeout(timer);
}
}
function out(){
if (navCur.offsetLeft >= curPostion_1)
{
var a = Math.max(parseInt((navCur.offsetLeft - curPostion_1) / 15), 3);
navCur.style.left = navCur.offsetLeft - a + "px";
timer = setTimeout(arguments.callee, 5);
}
else
{
navCur.style.left = curPostion_1 + "px";
clearTimeout(timer);
}
}
function getId(id){
return document.getElementById(id)
}
})();
</script>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关推荐
-
JS简单实现动画弹出层效果
JS简单实现动画弹出层效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画弹出层&l
-
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&
-
js实现div拖动动画运行轨迹效果代码分享
本文实例讲述了js div拖动动画运行轨迹效果.分享给大家供大家参考.具体如下: 这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码.可以选择[记住轨迹]与[不记住轨迹]两种拖动显示模式,从而显示出不同的拖动效果. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能
-
JS实用的动画弹出层效果实例
本文实例讲述了JS实用的动画弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
使用ngView配合AngularJS应用实现动画效果的方法
AngularJS 提供了一个很棒的方式来创建单页app.正是由于这个原因,使得我们的站点看起来更像是一个原生的手机程序.为了使它看起来更像是原生的程序,我们可以使用 ngAnimate module 为它添加过渡和动画效果. 这个模块可以使我们创建漂亮的程序.今天,我们将要看一下如何为 ng-view 添加动画效果. 我们要构建什么 我们假设我们有一个单页面的程序,并且想为这个页面添加动画效果.点击某一个链接会将一个试图滑出,同时将另一个试图滑入. 我们将会使用: 使用 ngRoute 来为我
-
js实现按钮颜色渐变动画效果
本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&
-
js实现动画特效的文字链接鼠标悬停提示的方法
本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父
-
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l
-
JS实现网页右侧带动画效果的伸缩窗口代码
本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码.分享给大家供大家参考,具体如下: 这是一款带缓冲效果的网页右侧固定伸缩窗口,点击带颜色的区域,浮动的层窗口就会伸缩出来,再次点击则缩进去.无jQuery,完全JavaScript实现的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH