当前位置:首页 > 开发 > Web前端 > Jquery > 正文

蓝色jQuery导航条

发表于: 2015-06-09   作者:ini   来源:转载   浏览:
摘要: 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<

效果体验:
http://keleyi.com/keleyi/phtml/jqtexiao/39.htm

HTML文件代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );
$("#hovertreecaidan li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#hovertreecaidan li a").hover(function() {
$(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide
$(".over",    this).stop().animate({'top':    '0px'},     300); // move down - show
}, function() {
$(".out",    this).stop().animate({'top':    '0px'},     300); // move up - show
$(".over",    this).stop().animate({'top':    '-48px'},    300); // move up - hide
});
});
</script>
</head>
<body>
<div id="hovertreecaidan" class="hovertreedaohang">
<ul>
<li><a href="http://keleyi.com">首 页</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>
<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
<li><a href="http://hovertree.com/">HoverTree</a></li>
<li><a href="http://hovertree.com/texiao/">网页特效</a></li>
<li><a href="http://tool.keleyi.com/">工具</a></li>
<li><a href="http://hovertree.com/guestbook/">留言</a></li>
</ul>
<div class="hvtclear"></div>
</div> 
</body>
</html>

 其中jQuery的wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。

参考:http://hovertree.com/hvtart/bjae/m66osaoc.htm

 

网页特效:http://ini.iteye.com/blog/2165698

蓝色jQuery导航条

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1、效果及功能说明 左侧列表导航条制作鼠标滑过导航条标签,flash动画导航条展示 2、实现原理 首先
分享一款基于jQuery滑动分步式进度导航条代码。这是一款基于jquery实现的网站注册动态步骤导航条代
在线演示1 本地下载 原文篇幅较长完整代码及内容请见原文:http://www.gbtags.com/gb/share/5864.ht
日期:2012-9-6 来源:GBin1.com 在线演示 本地下载 在过去的web开发和设计中,大家往往使用flash来
日期:2012-9-6 来源:GBin1.com 在线演示 本地下载 在过去的web开发和设计中,大家往往使用flash来
关于作者: 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库) 艺名:天放 weib
阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34048
一、基础导航条   在制作一个基础导航条时,主要分以下几步:   第一步:首先在制作导航的列表(
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> &l
喜欢蓝色大门里的张士豪,因为他单纯、简单、阳光又可爱,或许更喜欢他对爱情的那份执着,喜欢他有
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号