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

动态翻滚的导航条

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
div#nav{height:32px; background:url(http://zsrimg.ikafan.com/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(http://zsrimg.ikafan.com/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(http://zsrimg.ikafan.com/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}
/* ]]> */

  • 我们
  • 网页特效
  • 工具软件
  • 源码下载
  • 菜单导航
  • 层和布局
  • 论坛社区
  • 广告联系

/* = _this.lineHeight){c.scrollTop = _this.lineHeight;return;}
c.scrollTop += _this.config.num;
_this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);
};
this.scrollDown = function (){
var c = _this.container;

if(c.scrollTop */

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

时间: 2009-11-08

js实现横向拖拽导航条功能

效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs

利用js定义一个导航条菜单

效果: 一.html代码: <div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <div c

纯JS实现弹性导航条效果

效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto;

JS实现选中当前菜单后高亮显示的导航条效果

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho

JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

基于JS代码实现导航条弹出式悬浮菜单

1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所

CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

JS+CSS实现鼠标滑过时动态翻滚的导航条效果

本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

仿客齐集首页导航条DIV+CSS+JS [代码实例]

作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下:  你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info">   <div

CSS仿淘宝首页导航条布局效果

以下是CSS内容部分: /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;widt

DIV+CSS+JS不间断横向滚动实现代码

DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

效果直逼flash的Div+Css+Js菜单

效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

Div+CSS+JS树型菜单,可刷新

搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了

Div+Css(+Js)菜单代码及制作工具

效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒222.. 这里是内容撒.222.. 这里是内容撒.222.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.444.. 这里是内容撒.44

iOS仿网易新闻滚动导航条效果

本文实例为大家分享了iOS滚动导航条效果展示的具体代码,供大家参考,具体内容如下 实现效果 效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜色为红色: 滚动的导航条包括两部分:标题滚动视图(UIScrollView),内容滚动视图(UIScrollView) 实现代码 1.首先实现Main.storyboard 2.创建多个子控制器:头条.科技.汽车.体育.视频.图片.热点 // 头条ViewController, 其它控制器和这个控制

用jQuery实现一些导航条切换,显示隐藏的实例代码

代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>导航条在项目中的应用</title>    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2

div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo