网页菜单动画例子

最新推荐文章于 2021-07-19 08:42:00 发布

bcbobo21cn

最新推荐文章于 2021-07-19 08:42:00 发布

阅读量665

点赞数

分类专栏： .Net web前端文章标签： html css jquery 菜单动画

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/47975099

版权

.Net 同时被 2 个专栏收录

381 篇文章 14 订阅

订阅专栏

web前端

150 篇文章 1 订阅

订阅专栏

码码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
	font-family: "宋体";
	font-size: 14px;
	margin:0px;
}
ul {list-style:none;}
#links ul li {
	margin-bottom: 6px;
}
-->
</style>
<script type="text/javascript" src="jslib/jquery-1.6.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a.link').hover(function() {
			$(this).animate({ paddingLeft: '20px' },400);
		}, function() {
			$(this).animate({ paddingLeft: 0 }, 400);
		});
	});
</script>
</head>
<body>
	<ul><li><a href="#" class="link">首页</a></li>
	<p></p>
	  <li><a href="#" class="link">菜单一</a></li>
	<p></p>
      <li><a href="#" class="link">菜单二</a></li>
	<p></p>
      <li><a href="#" class="link">菜单三</a></li>
	<p></p>
      <li><a href="#" class="link">菜单四</a></li>
	<p></p>
      <li><a href="#" class="link">菜单五</a></li>
	<p></p>
      <li><a href="#" class="link">菜单六</a></li>      
  </ul>
</body>
</html>

图图：

代码说明：
设置html体的字体为宋体，字体尺寸14px，四个外边距都为0；
ul列表风格-无；
每个列表项底部外边距为6；

a链接鼠标悬停函数：
动画：左缩进20px，持续400ms;
动画，复原，持续400ms;

html体：
ul中包含li项目
li中包含a链接

bcbobo21cn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页菜单动画例子

码码：无标题文档 $(document).ready(function() { $('a.link').hover(
复制链接

扫一扫

专栏目录