duration返回当前音频/视频的长度（以秒计）体验很好纵向导航hover效果，移出恢复当前位置
很常见的一种导航的hover效果，鼠标放上后除了正常的hover，在移出整个导航后，会恢复当前栏目的特殊样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*CSS源代码*/
ul{ list-style:none; margin:0; padding:0;}
.box{ width:300px; height:350px; margin:100px auto; position:relative; z-index:0; border:2px solid #F99;}
.box ul{ width:300px; position:absolute; z-index:2; left:0; top:0;}
.box li{ padding:0 10px; height:49px; line-height:49px; cursor:pointer; border-bottom:1px dotted #ccc;}
.box li:last-child{ border:none;}
.bg{ width:300px; height:50px; background:#3CF; position:absolute; z-index:1; left:0; border-radius:10px;}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="box">
<ul>
<li>导航1</li>
<li class="on">当前栏目</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
<li>导航7</li>
</ul>
<div class="bg"></div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
/*Javascript代码片段*/
$(document).ready(function(){
var menuLi=$(".box li");
var menuUl=$(".box");
var bg=$(".bg");
function onSelect(){
n=menuUl.find("li.on").index();
bg.animate({top:menuLi.outerHeight()*n},{queue:false,duration:100});
}
onSelect();
menuLi.hover(
function(){
n=$(this).index();
bg.animate({top:menuLi.outerHeight()*n},{queue:false,duration:100});
},
function(){
onSelect();
}
);
});
</script>
</body>
</html>
.
相关推荐
在纵向导航栏中，CSS主要负责设置导航项的布局、颜色、hover效果等。例如，可以通过设置`display`属性为`none`或`block`来控制导航项的展开与折叠，通过`transition`属性实现平滑过渡效果。 `index.html`是网页的...
本教程将深入探讨如何使用jQuery创建一个既可横向又能纵向滑动的完美菜单，这种效果可以极大提升用户体验，使得网站更加互动和吸引人。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、...
在这个特定的案例中，我们利用jQuery创建了一个具有Flash效果的导航菜单，但与Flash相比，jQuery的优势在于更好的浏览器兼容性和更快的执行速度，同时避免了Flash插件的安装需求。 这个"动感纵向滑动背景导航菜单...
本教程将详细讲解如何使用JS来仿制Flash的横向和纵向导航菜单效果，使网页的用户体验更加丰富和动态。 一、HTML结构基础 在创建任何特效之前，首先需要构建一个基本的HTML结构，为导航菜单提供框架。通常，我们可以...
html纵向导航代码
基于JQuery编写的一个纵向导航栏-展开效果的html文件,对于刚刚接触web开发的人很有帮助的,有经验的人不建议下载
RecyclerView实现纵向导航栏(获取RecyclerView第一个View)RecyclerView实现纵向导航栏(获取RecyclerView第一个View)RecyclerView实现纵向导航栏(获取RecyclerView第一个View)
在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...
总的来说，这个项目提供了一个全面的解决方案，帮助开发者创建具有专业视觉效果和交互体验的纵向下拉二级导航。其缓冲效果和一级高亮功能不仅提升了用户体验，也为开发者节省了大量编码时间。通过学习和理解这个项目...
用CSS设计的纵向导航条实例
很简单的html纵向导航栏手风琴特效，适合刚开始学习html的同学，非常实用。
演示地址 http://www.cq67.net/daohang/zongxiang/184.html 此款菜单为蓝色，同时发布了一款红色的。该菜单为多个按钮纵向排列形式，有需要横向的导航菜单爱好者可自行修改css代码
div+css 纵向三级导航菜单 html代码
在JavaScript的世界里，实现纵向全屏幕滚动效果是一种常见的网页动态设计技术，主要用于创建现代、吸引用户的单页应用或展示型网站。这种效果让页面在用户滚动时，每一屏内容都会占据整个屏幕，创造出流畅的浏览体验...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单"是一个专门针对这种交互需求设计的功能。这个功能通常应用于那些层次...
"纵向的JS相册效果"是一个利用JavaScript实现的、展示图片的动态相册组件，这种效果通常用于提升用户体验，使得用户可以方便地浏览一系列图片，而无需跳转页面或者加载新的内容。 在创建一个纵向的JS相册时，开发者...
但现代浏览器已经很好地支持CSS Flexbox，因此在大多数情况下，这一步是可选的。 至此，我们已创建了一个简单的CSS纵向导航条，适用于左右划分的界面布局。你可以根据自己的设计风格和项目需求进一步定制样式，例如...
本主题聚焦于“css纵向导航菜单及二级弹出菜单”，这是一种常见的交互式网页设计技术，尤其适用于内容层次丰富的网站。 首先，让我们详细了解纵向导航菜单。纵向菜单，也称为侧边栏菜单，通常位于网页的一侧（左侧...
"炫酷"一词表明这个导航条在视觉效果上可能有吸引人的动态效果或者独特的设计风格，而"纵向"则明确了它的排列方向是从上到下，而非常见的横向排列。 【描述解析】 描述中提到"包含flash源码，体积超小"，这意味着这...
在网页设计中，下拉导航菜单是一种常见的交互元素，它能有效地组织大量链接，提高用户体验。本主题聚焦于使用jQuery实现的橙色纵向下拉导航菜单。jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、...