标签：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>animater作业.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div { border: 1px solid gray; } .text{ border:none; } #main { width: 800px; height: 201px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #a,#b,#c,#d { text-align:center; background-color: yellow; width: 30px; height: 200px; position:relative; cursor:pointer; float:left; } #aa,#bb,#cc,#dd { width: 670px; height: 200px; display: none; float: left; clear:right; } </style> <script type="text/javascript" src="jquery-2.1.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#a,#b,#c,#d").click(function(){ if($(this).attr("flag")=="left"){ $(this).animate({left:‘+672px‘},"slow"); $(this).nextAll().animate({left:‘+672px‘},"slow"); var id=$(this).attr("id"); $(".text").hide(); $("#"+id+id).prev().show(); $(this).attr("flag","right"); $(this).nextAll().attr("flag","right"); }else if($(this).attr("flag")=="right"){ $(this).prevAll().animate({left:‘0px‘},"slow"); $(this).animate({left:‘0px‘},"slow"); var id=$(this).attr("id"); $(".text").hide(); $("#"+id+id).show(); $(this).attr("flag","left"); $(this).prevAll().attr("flag","left"); } }); }); </script> </head> <body> <div id="main"> <div id="a" flag="left">a</div> <div id="b" flag="left">b</div> <div id="c" flag="left">c</div> <div id="d" flag="left">d</div> <div class="text" id="aa">aaaaaaa</div> <div class="text" id="bb">bbbbbbb</div> <div class="text" id="cc">ccccccc</div> <div class="text" id="dd" style="display:block">ddddddd</div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/hhtt/p/5264013.html
