jquery上下翻滚效果导航菜单(仿flash)

最新推荐文章于 2018-10-26 11:54:49 发布

struggle_xu

最新推荐文章于 2018-10-26 11:54:49 发布

阅读量1.4k

点赞数

分类专栏： PHP学习文章标签： jquery flash function class xhtml javascript

本文链接：https://blog.csdn.net/amandaxy/article/details/6671936

版权

PHP学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery上下翻滚效果导航菜单(仿flash)</title>
<meta name="keywords" />
<meta name="description" />

<style>

body {
background: #EEE;
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 14px;
line-height: 1.6;
}

#content {
width: 750px;
margin: 50px auto;
padding: 20px;
background: #FFF;
border: 1px solid #CCC;
}

h1 {
margin: 0;
}

hr {
border: none;
height: 1px; line-height: 1px;
background: #CCC;
margin-bottom: 20px;
padding: 0;
}

p {
margin: 0;
padding: 7px 0;
}

.menu {
height: 45px;
display: block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
position: relative;
display: block;
width: 110px;
height: 45px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
position: absolute;
left: 0;
width: 110px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
top: -45px;
}
#menu {
background: #EEE;
}
#menu ul li a {
color: #000;
}
#menu ul li a span.over {
color: #FFF;
}

#menu ul li span.bg {
height: 45px;
background: url('bg_over.gif') center center no-repeat;
}
#menu2 {
background: #000;
}
#menu2 ul li a {
color: #FFF;
}
#menu2 ul li a span.over {
background: #FFF;
color: #000;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {

/* 1st example */

/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

// loop each anchor and add copy of text content
$("#menu li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show

}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
});

/* 2nd example */

$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 200); // move down - show

}, function() {
$(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
});

});

</script>
</head>
<body>
<div id="content">
<h1>jquery上下翻滚效果导航菜单(仿flash)</h1>
<hr />
<div id="menu" class="menu">
<ul>
<li><a href="http://51xuediannao.com">懒人建站</a></li>
<li><a href="http://51xuediannao.com/JS">JS代码</a></li>
<li><a href="http://51xuediannao.com/JS/AD">广告代码</a></li>
<li><a href="http://51xuediannao.com/JS/texiao">网页特效</a></li>
<li><a href="http://51xuediannao.com/MOSS-WSS/">MOSS界面定制</a></li>
</ul>
</div>
<hr />
<div id="menu2" class="menu">
<ul>
<li><a href="http://51xuediannao.com">懒人建站</a></li>
<li><a href="http://51xuediannao.com/JS">JS代码</a></li>
<li><a href="http://51xuediannao.com/JS/AD">广告代码</a></li>
<li><a href="http://51xuediannao.com/JS/texiao">网页特效</a></li>
<li><a href="http://51xuediannao.com/MOSS-WSS/">MOSS界面定制</a></li>
<li><a href="http://51xuediannao.com/MOSS-WSS/">任意添加</a></li>
</ul>
</div>
</div>

</div>
</body>

</html>

注意包含Jquery包，jquery包可在网上下载

struggle_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery上下翻滚效果导航菜单(仿flash)

jquery上下翻滚效果导航菜单(仿flash) body {background: #EEE;font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
复制链接

扫一扫