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

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_30391339

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量262

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hhtt/p/5264013.html

版权

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

转载于:https://www.cnblogs.com/hhtt/p/5264013.html

weixin_30391339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫