当前位置: 代码迷 >> JavaScript >> div格局
  详细解决方案

div格局

热度:307   发布时间:2013-03-26 09:54:34.0
div布局

如图片所示  我想做4个div的交替  就如图片显示的 我称上面的div为  类型1,下面的为 类型2。
我要做到的效果是:1、点击类型2的div(其中的1,2,3,4 小的div)  类型1的4个div跟真交替。
                  2、每5秒类型1的div换一层。
上面的移动最好有移动动画效果。
我想问的   大家觉得  我该如何来安排类型1的div层呢    我现在想到了一种方法  就是做4个div层  一个显示  其他3个消失。    大家帮忙看看有没什么更好的方法。  还有如果要做移动动画的效果,大家有没有什么好的参考资料,或代码给我看看。。。。谢谢大家。。。
web?div div

------解决方案--------------------

<!DOCUTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
.container{position:relative;height:90px;width:100px;overflow:hidden;}
.container .child{float:left;}
.contoller ul li{float:left;list-style:none;border:1px solid #444;padding:2px;margin-left:5px;}
</style>
</head>
<body>
<div class="container">
    <div class="child">aaaaaaaaaaaaaa</div>
    <div class="child">bbbbbbbbbbbbbb</div>
    <div class="child">cccccccccccccc</div>
    <div class="child">dddddddddddddd</div>
</div>
<div style="clear:both"></div>
<div class="contoller">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
<script type="text/javascript">
$(function(){
    var html = $('.container').html();
    var per = $('.child').height();
    var height = per*4;
    $('.container').height(height);
    $('.container').html(html+html);
    $('.contoller ul li').click(function(){
        var idx = $(this).index();
        var old = $('.container').scrollTop();
        $('.container').animate({scrollTop:per*idx},200,function(){
             if(per*idx==height){
                 $('.container').scrollTop(0);
             }
        })
    })
})
</script>
</body>
</html>

不知道这效果行么。。
------解决方案--------------------
引用jquery
<html>
<head>
     
<style>
    div{
        cursor: pointer;
  相关解决方案