<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中的动画效果</title>
<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jss/jquery.pngFix.js"></script>
<script src="jss/jquery.pngFix.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").pngFix();
});
</script>
</head>
<body>
<style type="text/css">
#menu{ /*控制页面背景*/
width:120px;
height:500px;
background-image:url(jss/images/menu_bg.gif);
background-size: 120px;
border-left: 2px;
border-top: 10px;
}
#li{
border-left: 2px;
border-top: 10px;
}
</style>
<div id="menu">
<ul>
<li><a href="www.mingribook.com">图书介绍</a></li>
<li><a href="www.mingribook.com">新书预告</a></li>
<li><a href="www.mingribook.com">图书销售</a></li>
<li><a href="www.mingribook.com">斟误发布</a></li>
<li><a href="www.mingribook.com">资料下载</a></li>
<li><a href="www.mingribook.com">好书推荐</a></li>
<li><a href="www.mingribook.com">技术支持</a></li>
<li><a href="www.mingribook.com">联系我们</a></li>
</ul>
</div>
<img src="jss/images/title.gif" width="30" height="80" id="flag" />
<script>
$(document).ready(function(){
$("#flag").mouseover(function(){
if($("#menu").is(':hidden')){ //判断菜单是否为隐藏状态
$("#menu").show(300); //如果隐藏则将菜单显示
}
});
$("#menu").hover(null,function(){
$("#menu").hide(300); //隐藏菜单
});
});
</script>
</body>
</html>
jQuery中的动画效果
最新推荐文章于 2023-08-10 16:36:12 发布