under java script- 学习笔记 2010-06-14 pm
<!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=gb2312" /> <title>jQuery,简单手风琴效果|小繁的blog</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <link rel="stylesheet" href="/normal.css" /> <style type="text/css"> .wrapper_box { background-color:#FFFFFF; margin:0 auto; padding:8px 10px; width:916px; } #imageMenu { height:421px; overflow:hidden; position:relative; width:916px; } #imageMenu ul { display:block; height:421px; width:1500px; } #imageMenu ul li { float:left; } #imageMenu ul li a { background:#FFFFFF none no-repeat left top; border-right:5px solid #FFFFFF; cursor:pointer; display:block; height:421px; overflow:hidden; text-indent:-1000px; width:224px; } #imageMenu ul li.stap1 a { background:#FFFFFF url(http://www.dshos.com/images/step1.jpg) no-repeat left top; } #imageMenu ul li.stap2 a { background:#FFFFFF url(http://www.dshos.com/images/step2.jpg) no-repeat scroll left top; } #imageMenu ul li.stap3 a { background:#FFFFFF url(http://www.dshos.com/images/step3.jpg) no-repeat scroll left top; } #imageMenu ul li.stap4 a { background:#FFFFFF url(http://www.dshos.com/images/step4.jpg) no-repeat scroll left top; } </style> <body> <div class="wrapper_box"> <div id="imageMenu"> <ul> <li class="stap1"><a href="/"></a></li> <li class="stap2"><a href="/"></a></li> <li class="stap3"><a href="/"></a></li> <li class="stap4"><a href="/"></a></li> </ul> </div> </div> </body> <script type="text/javascript"> var thisId; $(function (){ var curimg $("#imageMenu li a").hover(start,clos); }) function start(){ $("#imageMenu li a").stop(true); if(!$(this).is(":animated")){ var $this=$(this); $("#imageMenu li a").animate({width:'48'},"slow",null,function(){ }); thisId = $this.parent().attr("class"); thisId = "#"+thisId; $this.animate({width:'759'},600).stop(); showInfo(thisId); } } function clos(){ $("#imageMenu li a").stop(true); $("#imageMenu li a").animate({width:'224'},600); $("#info").show(); } function showInfo(hh){ if(!$(this).is(":animated")){ $(".contain_box div").hide(0,function(){$(hh).fadeIn(0);}) } } </script> </html>
Tips:You can change the code before run.
Tags:jQuery
沙发~
嘿嘿~ 过来看看你~
多谢。消灭零回复，哈哈。
Name (required)
Email (required)
Website
Comment
14 06,2010 / 20:55
沙发~
嘿嘿~ 过来看看你~
14 06,2010 / 23:33
多谢。消灭零回复，哈哈。