jquery做的动画演示(jQuery+Animate+Demo) - jQuery - 。
大家可以看看.
演示地址 http://www.cnjquery.com/demo/jQuery+Animate+Demo/login.html
下载:http://bbs.cnjquery.com/viewthread.php?tid=39&pid=99&page=1&extra=page%3D1#pid99
以下为引用的内容：!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>login</title> <script type="text/javascript" src="jquerymini.js"></script> <script type="text/javascript"> $(document).ready(function(){ //控制注册框动画 $(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框 $("#regbox").slideToggle("slow");//如果隐藏就显示，反之... return false; }); //关闭注册框动画 $(".delete").click(function(){//关闭注册框 $("#regbox").animate({top:"-100px",opacity:"hide"},1000).animate({top:"0px"})//在1秒钟里动画向上移动100个像素，然后移动到初始位置 }); //控制登录框动画 $(".loginfont").click(function(){//点击登录按钮时关闭或者打开登录框 $(".loginbox").animate({opacity:"toggle",left:"50px"},1000).animate({left:"10px"},"fast");//如果隐藏则显示，向右移动50像素 return false; }); //小图标晃动动画 $("#nav").find("img").mouseover(function(){ $(this) .animate({ left: -20 }) .animate({ left: 20 }) .animate({ left: -20 }) .animate({ left: 20 }) .animate({ left: -20 }) .animate({ left: 20 }) .animate({ left: 0 }); }); //notice动画 $("#notice").animate({opacity:"show"},000).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).slideUp("slow").slideDown("slow"); setTimeout("$('#siderbar').slideUp('slow').slideDown('slow')",1000);//1秒钟以后折叠然后展开层silderbar //控制右侧BOX框动画 setTimeout("$('#rightbox').show('slow')",2000);//2秒钟以后显示隐藏层rightbox //控制右侧BOX框内的DD显示与隐藏 //第一个基本效果 $("#rightbox").find("dt:first").click(function(){ $(this).next().toggle("slow"); }); //第二个滑动效果 $("#rightbox").find("dt:eq(1)").click(function(){ $(this).next().slideToggle("slow"); }); //第三个淡入淡出 $("#rightbox").find("dt:eq(2)").click(function(){ $(this).next().animate({opacity:"toggle"},"slow") }); //第四个自定义动画，这里的toggle(fn1,fn2)意思是：每次点击时切换要调用的函数fn1,fn2 $("#rightbox").find("dt:last").toggle(function(){ $(this).next().animate({height:"100px"},"slow").animate({height:"toggle"}); $("img",this).attr("src","images/down.png") },function(){ $(this).next().animate({height:"toggle"}).animate({height:"80px"},"slow"); $("img",this).attr("src","images/up.png") }); //控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误， //因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。 $("#rightbox").find("dt:lt(3)").toggle(function(){ $(this).find("img").attr("src","images/down.png") },function(){ $(this).find("img").attr("src","images/up.png") }); }) </script> <style> * { margin:0; padding:0} ul { list-style:none} body{ background:#000; font-size:12px;} #loginbar {width:100%;height:30px;background-color:#930003;color:#FFFFFF;filter:Alpha(style=1,opacity=100,finishOpacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; } #loginbar a:link { color:#FFFFFF} #loginbar a:visited { color:#FFFFFF} #loginbar a:hover { color:#FFCC00} #leftbox { width:28%; height:600px; float:left;} /*right box*/ #rightbox { width:69%; height:575px; background:#930003; border:1px solid #932C00; margin-top:5px;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100); display:none; float:left ; background:#571600; margin-left:5px; padding:5px} #regbox { width:90%; height:auto; color:#FFFFFF; font-weight:bold; background:#930003; border:1px solid #FFF; border-top:none; margin-top:-3px;z-index:5; position:relative; float:right; padding:5px;display:none} * html #regbox {margin-top:-1px;} #regbox input { width:80%} #regbox .delete { position:absolute; bottom:12px;right:20px; cursor:pointer} #regbox fieldset { padding:3px; text-align:center; line-height:22px; width:90%; margin:0 auto;} .mleft { margin-left:10px; color:#FF9900} .fleft { float:left; width:auto} .right{ float:right; width:auto} .fullwidth { width:100%} .loginbox { display:none; position:relative;} * html .loginbox { margin-top:3px;} .submit {width:50px; background:#930003; color:#FFFFFF; font-weight:bold; margin-top:3px;} * html .submit { margin-top:0} /*nav*/ #nav { width:auto; height:auto;position:relative; margin-top:3px;} #nav ul li { list-style:none; display:inline; line-height:30px;} #nav ul li img { position:relative; cursor:pointer;} /*notice*/ #notice { width:90%; height:80px;background:#930003; border:1px solid #FFF; position:relative;text-align:center; color:#FFCC00; line-height:25px; float:right; margin:5px 0 5px 0; padding:5px;} /*Myinfo*/ #siderbar { width:90%; background:#930003; border:1px solid #FFF;height:477px; position:relative;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100);color:#FC0; font-weight:bold; float:right; line-height:22px; padding:5px;} .photo { float:left; margin-right:5px; margin-bottom:10px;} .photo img { width:144px; height:192px; border:1px solid #FF9900;} .clear { clear:both} .rtitle { background:#999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px;} .rcontent { width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px;} #rightbox dl { width:100%; height:auto} #rightbox dt{ background:#999900; border-left:10px solid #FF9900;border-bottom:1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px; cursor:pointer; position:relative} #rightbox dt img { position:absolute; right:10px; top:10px;} #rightbox dd {width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px; background:#000000} </style> </head> <body> <!--login bar Start--> <div id="loginbar"> <div class="fleft"><a class="loginfont" href="http://www.baidu.com">登录Demo</a></div> <div class="fleft loginbox"> <div class="fleft">用户名：<input type="text" /> </div> <div class="fleft">密 码：<input type="password" /></div> <div class="fleft"><input type="submit" value="提交" class="submit"/></div> </div> <div class="fleft"> <a class="regfont" href="http://www.baidu.com">注册Demo</a></div> <div class="fleft"><span class="mleft">demo:褪色</span></div> <div id="nav" class="fleft"> <ul> <li><img src="images/01.png" /></li> <li><img src="images/02.png" /></li> <li><img src="images/03.png" /></li> <li><img src="images/04.png" /></li> <li><img src="images/05.png" /></li> <li><img src="images/06.png" /></li> <li><img src="images/07.png" /></li> <li><img src="images/08.png" /></li> </ul> </div> </div> <div class="clear"></div> <div id="leftbox"> <div id="regbox"> <form action="" name="form1"> <fieldset> <legend>注册信息</legend> <table width="100%"> <tr><td width="40%">用户名：</td><td><input type="text" /></td></tr> <tr><td>密 码：</td><td><input type="password" /></td></tr> <tr><td>提示问题：</td><td><input type="text" /></td></tr> <tr><td>问题答案：</td><td><input type="text" /></td></tr> <tr><td colspan="2"><input type="submit" value="提交" class="submit" /></td></tr></table> </fieldset> </form> <img class="delete" src="images/shut.gif" title="关闭" /> </div> <!--login bar Over--> <div id="notice"> <h4>本页面为jQuery Animate演示</h4> <h3>Demo:褪色</h3> </div> <!--myinfo--> <div id="siderbar"> <p> hello,我是褪色(FFEEDD)， OK，废话不多说，本页面演示了jQeruy部分动画Animate效果， 这看起来似乎很酷，能让我们的网页更加招人喜爱，不仅如此，这些 看上去很酷的效果对jQuery来说简直是小菜一碟！ 由于我太菜了，所以要努力跟大家学习啊，对了，因为没装IE7，所以没有考虑IE7所以不知道在IE7下有什么问题。 </p> </div> </div> <div id="rightbox"> <dl> <dt>基本动画<img src="images/up.png" /></dt> <dd> <ul><li>show()显示隐藏的匹配元素</li> <li>hide()隐藏显示的元素</li> <li>toggle()切换元素的可见状态</li> <li>括号里有两个参数(speed,fn)速度和回调函数,速度有fast,normal,slow三种，fn函数在动画结束后返回的函数命令</li> </ul> </dd> </dl> <dl> <dt>滑动效果<img src="images/up.png" /></dt> <dd> <ul><li>slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素</li> <li>slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素</li> <li>slideToggle()通过高度变(向下增大 or 向上减小)化来切换所有匹配元素的可见性</li> <li>这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。</li> </ul> </dd> </dl> <dl> <dt>淡入淡出<img src="images/up.png" /></dt> <dd> <ul><li>fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果--显示</li> <li>fadeout通过不透明度的变化来实现所有匹配元素的淡入效果--隐藏</li> <li>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度</li> <li> 例子：$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度</li> <li>这个效果没有提供切换的函数，好像只可以在自定义的animate里设置opacity:"toggle",效果是一样的</li> </ul> </dd> </dl> <dl> <dt>自定义动画<img src="images/up.png" /></dt> <dd> <ul> <li>用于创建自定义动画的函数</li> <li>这个我解释不好，核心应该是animate，具体请查看API</li> <li>//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，</li> <li>//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。</li> </ul> </dd> </dl> </div> </body> </html> |
补充：网页制作,jquery
