当前位置：移动技术网 > IT编程>开发语言>JavaScript > javascript实现的鼠标悬停时动态翻滚的导航条

javascript实现的鼠标悬停时动态翻滚的导航条

2019年07月30日 | 移动技术网IT编程 | 我要评论

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>动态翻滚的导航条</title> 
<style type="text/css"> 
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} 
div#nav{height:32px; background:url(//files.jb51.net/demoimg/200911/yl29.jpg) repeat-x} 
div#nav ul{ 
width:705px; 
list-style:none; 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: 0px; 
} 
div#nav ul li{ 
float:left; 
height:32px; 
overflow:hidden; 
background-image: url(//files.jb51.net/demoimg/200911/yl30.jpg); 
background-repeat: repeat-y; 
background-position: right 0; 
padding-top: 0; 
padding-right: 1px; 
padding-bottom: 0; 
padding-left: 0px; 
font-family: arial; 
font-size: 12px; 
line-height: 32px; 
font-weight: bold; 
} 
div#nav ul li a{ 
float:left; 
height:100%; 
width: 77px; 
background:url(//files.jb51.net/demoimg/200911/yl28.jpg) repeat-x; 
color:#fff; 
text-decoration:none; 
padding-top: 0; 
padding-right: 5px; 
padding-bottom: 0; 
padding-left: 5px; 
text-align:center; 
} 
div#nav ul li a.hover{ 
clear:both; 
background-position:0 -32px; 
width: 77px; 
} 
div#nav ul li.on a{ 
background-position:0 -32px; 
} 
div#nav ul li.nobg{background:none} 
/* ]]> */ 
</style> 
</head> 
<body> 
<div id="nav"> 
<ul class="clear"> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li class="nobg"></li> 
</ul> 
</div> 
 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

如果大家不喜欢这个颜色，可以修改代码中的图片的颜色即可。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]
fiddler修改host，协议，请求转发

fiddler根据请求路径，修改host，协议，和请求转发if (oSession.host=="517repa... [阅读全文]
如何自定义修改微信链接、QQ链接的标题描述图片

前端时间很多人私信我，问我怎么修改。这里就直接把方法给出来，有什么不懂的可以来问一下我V：jh831x 。或者直... [阅读全文]
ID：32----做一套QQ空间自动加好友的功能

2019年1月7日09:16:03 想法添加背景： 1.QQ空间中添加好友的接口是不会封号的，只会提示你操作过于... [阅读全文]
Redis的数据类型

Redis的五种数据类型：string、hash、list、set、zset。Stringstring类型是二进... [阅读全文]
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】

【2016年信息安全工程师综合知识第11题】11.以下关于认证技术的叙述中，错误的是（）。A．指纹识别技术的... [阅读全文]
安全整改思考之道

最近项目组安全整改，然后需要把所有的安全隐患问题一扫而空，其中也踩了不少的坑，记录下来，以便后续遇到类似问题能立... [阅读全文]

网友评论


验证码：

javascript实现的鼠标悬停时动态翻滚的导航条

2019年07月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论