小编LAS*_*ASH的帖子

使用jquery动画排列块

我有一个div.content,里面有30个div(div.blocks)

我想制作一个动画div.blocks来到他们自己的位置.

例如:

CSS

.content{
    position:absolute;
    background:gray;
    width:100%;
    height:100%;
}

.blocks{
    display:inline-block;
    position:absolute;
    background:wheat;
    color:gray;
    font-size:large;
    width:50px;
    height:50px;
    margin-top:4px; 
}
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="content">
    <div class="blocks" data-number="0">1</div>
    <div class="blocks" data-number="1">2</div>
    <div class="blocks" data-number="2">3</div>
    <div class="blocks" data-number="3">4</div>
    <div class="blocks" data-number="4">5</div>
    <div class="blocks" data-number="5">6</div>
    <div class="blocks" data-number="6">7</div>
    <div class="blocks" data-number="7">8</div>
    <div class="blocks" data-number="8">9</div>
    <div class="blocks" data-number="9">10</div>
</div>
Run Code Online (Sandbox Code Playgroud)

jQuery的

$(function(){
    // [0][0]==top
    // [0][1]=right
    var positions=[
    [10,10],
    [10,64],
    [10,118],
    [10,172],    
    [10,226],    

    [64,10],
    [64,64],
    [64,118],
    [64,172],    
    [64,226]    

    ];


    $( …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

3
推荐指数
1
解决办法
198
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1