web网页设计实现——04.16

最新推荐文章于 2025-07-16 11:49:03 发布

原创

最新推荐文章于 2025-07-16 11:49:03 发布 · 6.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#web网页设计实现——04.16

本文介绍了使用jQuery实现的网页设计技巧，包括二级菜单的淡出淡入效果和如何通过jQuery获取元素的宽度和高度。讲解了show()、hide()、toggle()等动画方法，以及animate()在创建自定义动画中的应用。

jQuery的淡出淡入：

1.二级菜单（jQuery实现）

代码：

 1. <!DOCTYPE html>
 2. <html lang="en">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <title>Title</title>
 6.     <script src="jquery-1.8.3.min.js"></script>
 7.     <style>
 8.         #div1,#div4,#div2,#div3{
 9.             padding: 20px;
 10.             text-align: center;
 11.             background-color: #fffe32;
 12.             border: 1px solid #13ffff;
 13.         }
 14.         #div4{
 15.             padding: 100px;
 16.             display: none;
 17.         }
 18.     </style>
 19.     <script>
 20.         $(document).ready(function () {
 21.             $("#div1").click(function () {
 22.                 $("#div4").slideDown(888);
 23.             });
 24.             $("#div2").click(function () {
 25.                 $("#div4").slideUp(888);
 26.             });
 27.             $("#div3").click(functio