imported>카페인러브 m (→Draggable) |
imported>카페인러브 |
||
| 3번째 줄: | 3번째 줄: | ||
== Draggable == | == Draggable == | ||
<div style="width:100%; overflow:hidden;"> | |||
<div id="container" style="width:100000px"> | <div style="width:100%; height:200px; overflow:hidden; position:relative;"> | ||
<div style="float:left; width:200px; height:200px; opacity:0.6; background:#06f;"></div> | <div id="container" style="width:100000px; height:200px; position:absolute; top:0; left:0;"> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#0f9d00;"></div> | <div style="float:left; width:200px; height:200px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#06f;">1</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#f00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#0f9d00;">2</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#ffea00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#f00;">3</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#06f;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#ffea00;">4</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#0f9d00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#06f;">5</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#f00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#0f9d00;">6</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#ffea00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#f00;">7</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#06f;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#ffea00;">8</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#0f9d00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#06f;">9</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#f00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#0f9d00;">10</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; background:#ffea00;"></div> | <div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#f00;">11</div> | ||
<div style="float:left; width:200px; height:200px; margin-left:20px; opacity:0.6; color:#fff; font-size:64px; line-height:200px; text-align:center; background:#ffea00;">12</div> | |||
</div> | </div> | ||
• 현재 페이지 URL 줄이기