我的jquery练习(一)

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_33812433

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yidianshishang/archive/2012/12/30/2839567.html

本文介绍如何使用jQuery实现列表项下拉菜单的透明度渐变显示与隐藏功能，通过简单的HTML结构配合jQuery的hover和fadeTo方法，实现平滑过渡效果。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>jquery练习</title>
 6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script>  <!--（这里的地址是我的本地地址若想实现下面的效果,需在网上或官网上下载jquery-1.4.2.js到电脑上，或者直接到官网复制网络地址）-->
 7 <script type="text/javascript">
 8 $(function(){
 9  $('.ys1').css({opacity:0});
10  var $nav=$('.nav');
11  $nav.hover(function(){$(this).find('.ys1').fadeTo(200,1)},function(){$(this).find('.ys1').fadeTo(200,0)})
12  
13  })
14 </script>
15 <style type="text/css">
16 *{padding:0px;margin:0px;}
17 ul,li{list-style-type:none;}
18 body{font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#000}
19 div{margin:50px auto;width:120px;}
20 .menu{background:#F3F3F3;width:120px;float:left;}
21 .nav{float:left;width:100%;height:25px;line-height:25px;text-align:center;position:relative;}
22 .ys1{width:100%;height:25px;display:block;float:left;line-height:25px;text-align:center;text-decoration:none;color:#FFF;background:#06F;position:absolute;left:0px;top:0px;}
23 </style>
24 </head>
25 <body>
26 <div>
27 <ul class="menu">
28  <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li>
29     <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li>
30     <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li>
31     <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li>
32     <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li>
33 </ul></div>
34 </body>
35 </html>