jquery animate图片左右移动（不完美） 

<!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>

 

posted @ 2016-03-10 23:34  bky410702849  阅读(1805)  评论(0)    收藏  举报