<html>
<head>
<title>해피CGI</title>
<style type="text/css">
#container{
width: 500px; /* 보이는 영역 가로크기*/
height: 220px; /* 보이는 영역 세로크기*/
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x:hidden;
overflow-y:hidden;
margin-top:30px;
}
.main-content {
width: 2055px; /* 내용부분의 전체 가로크기 */
height: 180px; /* 내용부분의 전체 세로크기 */
padding:5px;
background:#CCCCCC;
}
.section{
margin:0 0 0 0;
width:200px; /* 레이어가로크기 */
float:left;
margin-right:5px; /*레이어와 레이어 사이 간격*/
cursor:hand; /* 마우스커서표시 */
}
h1{font-family:Georgia, "Times New Roman", Times, serif; font-size:28px;}
</style>
<script type="text/javascript" src="js/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll2 = new Scroller('container', {area: 100, velocity: 1});
// container
$('container').addEvent('mouseover', scroll2.start.bind(scroll2));
$('container').addEvent('mouseout', scroll2.stop.bind(scroll2));
});
</script>
</head>
<body>
<div id="container">
<div class="main-content">
<div class="section">
<img src="image/s1.jpg" border=0>
</div>
<div class="section">
<img src="image/s2.jpg" border=0>
</div>
<div class="section">
<img src="image/s3.jpg" border=0>
</div>
<div class="section">
<img src="image/s4.jpg" border=0>
</div>
<div class="section">
<img src="image/s5.jpg" border=0>
</div>
<div class="section">
<img src="image/s1.jpg" border=0>
</div>
<div class="section">
<img src="image/s2.jpg" border=0>
</div>
<div class="section">
<img src="image/s3.jpg" border=0>
</div>
<div class="section">
<img src="image/s4.jpg" border=0>
</div>
<div class="section">
<img src="image/s5.jpg" border=0>
</div>
</div>
</div>
</body>
</html>
|
