<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery例子</title>
<style>
*{font-family:Arial; font-size:12px; padding:0px;}
ul{list-style:none;}
/*demo1*/
#demo1{width:300px;height:25px; background:#D2DA9E; border:#333 solid 1px;}
#demo1 li{float:left; display:inline-block;margin-left:10px;line-height:25px;text-align:center;width:78px;height:25px;position:relative;z-index:1;}
#demo1 a{color:#333;}
.a_move{background:url(demo/demo1.gif) no-repeat center top; width:78px; height:25px;position:absolute; left:0px; top:-12px;z-index:-1;}
/*demo2*/
#demo2{width:721px; height:54px;background:url(demo/demo2.gif) no-repeat left top;}
#demo2 li{float:left; text-align:center; height:30px; line-height:35px; width:98px; }
#demo2 li a{font-weight:bold; text-decoration:none; color:#000;}
#demo2 .li1{width:104px;}
#demo2 .li1 a em{visibility:hidden;}
#demo2d{position:relative;}
.demo2text{position:absolute; width:721px; height:20px; font-size:10px; font-weight:bold;top:33px; left:50px; display:none;}
/*demo3*/
.demo3{width:300px; margin-left:50px;overflow:hidden; height:30px; border:#ccc solid 1px;}
/*demo4*/
#demo4{ margin-left:50px; margin-top:50px; width:500px; height:50px; }
/*demo5*/
.demo5,.demo6{border:none; background:#CCC; width:50px; height:20px; margin-left:50px;}
/*demo6*/
#tips{ position: relative; top:0px;width:600px; left:50%; margin-left:-300px; height:100px; text-align:center; font-size:14px; background:#CCCCFF; line-height:100px; display:none;}
</style>
</head>
<body>
<div id='tips'>这里是操作提示信息栏,操作已经成功。</div>
<ul id="demo1">
<li><a href="#">Home</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Home</a></li>
</ul>
<div id="demo2d">
<ul id="demo2">
<li class="li1"><a href="#"><em>apple</em></a></li>
<li><a href="#">Store</a></li>
<li><a href="#">iPod+iTunes</a></li>
<li><a href="#">.Mac</a></li>
<li><a href="#">QuickTime</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Mac OS X</a></li>
</ul>
<div class="demo2text">Hot News Switch11</div>
<div class="demo2text">Hot News Switch22</div>
<div class="demo2text">Hot News Switch33</div>
<div class="demo2text">Hot News Switch44</div>
<div class="demo2text">Hot News Switch55</div>
<div class="demo2text">Hot News Switch66</div>
<div class="demo2text">Hot News Switch77</div>
</div>
<textarea class="demo3"></textarea>
<div contentEditable="true" id="demo4" title="click to edit">你可以编辑我，我在一个DIV里</div>
<input type="button" value="删除" class="demo5"/>
<br /><br />
<input type="button" value="提示操作" class="demo6" />
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
//demo1
$("#demo1>li").hover(function(){
$(this).append("<div class='a_move'>");
},function(){
$(".a_move").remove();
});
//demo2
$(".demo2text").eq("0").show();
$("#demo2>li").each(function(i){
$("#demo2>li").eq(i).hover(function(){
$("#demo2").css("background","url(demo/demo2.gif) no-repeat left -"+i*50+"px");
$(".demo2text").eq(i).show();
$(".demo2text").not($(".demo2text:eq("+i+")")).hide();
},function(){});
});
//demo3
$(".demo3").focus(function(){
$(this).css("border","#FBCA54 solid 1px").animate({height:"60px"},300);
$(this).empty();
});
$(".demo3").blur(function(){
$(this).css("border","#ccc solid 1px").animate({height:"30px"},300);
});
//demo4
var flg=1;
$("#demo4").hover(function(){
$(this).css("background","#FFFFD3");
},function(){
if(flg==1){
$(this).css("background","#fff");
}
});
$("#demo4").click(function(){
$(this).css({"border":"#BE9634 solid 1px","background":"#ffffd3"});
flg=0;
});
$("#demo4").blur(function(){
flg=1;
$(this).css({"border":"none","background":"#fff"});
});
//demo5
$(".demo5").click(function(){
$(this).css("visibility","hidden");
$(this).after("<span>是否确认删除？ <a href='#' class='yes'>Yes</a> <a href='#' class='no'>No</a></span>")
$(".yes").click(function(){
$('.demo5').next().remove();
$(".demo5").css("visibility","visible");
});
$(".no").click(function(){
$('.demo5').next().remove();
$(".demo5").css("visibility","visible");
});
});
//demo6
$(".demo6").click(function(){
$("#tips").fadeIn(500);
setTimeout("$('#tips').fadeOut(1000)",1000);
});
});
</script>
</html>
包含有提示层、动画菜单、双击编辑等特效的jQuery特效网页.rar （5个子文件） 
codefans.net jQuerysamples 
demo.html 4KB
jquery.min.js 56KB demo 
demo1.gif 2KB demo2.gif 57KB ico-arrow.gif 9KB资源评论
- sophyass2014-06-06虽然不是自己想要的效果，还是给4分吧
- DN_20202013-06-13效果一般 还是很谢谢
