<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style>
*{padding:0;margin:0;}
img{vertical-align:top;border:none;}
a{text-decoration:none;}
#Left {
float:left;
margin:150px 0 0 0;
background: #FFF;
overflow:hidden;
border: 0px dashed #CCC;
500px;
height:150px;
border:5px solid #ccc;
zoom:1;
}
/*Download by http://sc.xueit.com*/
#Top {
float:left;
margin:50px auto;
background: #FFF;
overflow:hidden;
border: 0px dashed #CCC;
height: 500px;
150px;
border:5px solid #ccc;
zoom:1;
}
#Left .left {
float: left;
500%;
}
#Top .left {
float: left;
100%;
}
#left1,#left3 {
float: left;
border:5px solid #F00;
}
#left2,#left4 {
float: left;
border:5px solid blue;
}
#left1 img,#left2 img,#left3 img,#left4 img{
128px;
height:128px;
border:5px solid pink;
display:block;
float:left;
}
#Right {
float:left;
margin:150px 0 0 0;
background: #FFF;
overflow:hidden;
border: 0px dashed #CCC;
500px;
height:150px;
border:5px solid #ccc;
}
/*Download by http://sc.xueit.com*/
#Bottom {
float:left;
margin:-250px 0 0 510px;
background: #FFF;
overflow:hidden;
border: 0px dashed #CCC;
height: 500px;
150px;
border:5px solid #ccc;
}
#Right .right {
float: left;
500%;
}
#Bottom .right {
float: left;
100%;
}
#right1,#right3 {
float: left;
border:5px solid #F00;
}
#right2,#right4 {
float: left;
border:5px solid blue;
}
#right1 img,#right2 img,#right3 img,#right4 img{
128px;
height:128px;
border:5px solid pink;
}
</style> <script> window.onload=function(){
var oLeft=document.getElementById('Left');
var oLeft1=document.getElementById('left1');
var oLeft2=document.getElementById('left2');
oLeft2.innerHTML=oLeft1.innerHTML;
var oTop=document.getElementById('Top');
var oLeft3=document.getElementById('left3');
var oLeft4=document.getElementById('left4');
oLeft4.innerHTML=oLeft3.innerHTML;
function Move(){
if(oLeft.scrollLeft>=oLeft1.offsetWidth)
oLeft.scrollLeft-=oLeft1.offsetWidth;
else{
oLeft.scrollLeft++;
}
}
function Move1(){
if(oTop.scrollTop>=oLeft3.offsetHeight)
oTop.scrollTop-=oLeft3.offsetHeight;
else{
oTop.scrollTop++;
}
}
var timer=setInterval(Move,1);
var timer1=setInterval(Move1,1);
oLeft.onmouseover=function() {clearInterval(timer)};
oLeft.onmouseout=function() {timer=setInterval(Move,1)};
oTop.onmouseover=function() {clearInterval(timer1)};
oTop.onmouseout=function() {timer1=setInterval(Move1,1)};
var oRight=document.getElementById('Right');
var oRight1=document.getElementById('right1');
var oRight2=document.getElementById('right2');
oRight2.innerHTML=oRight1.innerHTML;
var oBottom=document.getElementById('Bottom');
var oRight3=document.getElementById('right3');
var oRight4=document.getElementById('right4');
oRight4.innerHTML=oRight3.innerHTML;
function Move2(){
if(oRight.scrollLeft<=0)
oRight.scrollLeft+=oRight1.offsetWidth;
else{
oRight.scrollLeft--;
}
}
function Move3(){
if(oBottom.scrollTop<=0)
oBottom.scrollTop+=oRight3.offsetHeight;
else{
oBottom.scrollTop--;
}
}
var timer2=setInterval(Move2,1);
var timer3=setInterval(Move3,1);
oRight.onmouseover=function() {clearInterval(timer2)};
oRight.onmouseout=function() {timer2=setInterval(Move2,1)};
oBottom.onmouseover=function() {clearInterval(timer3)};
oBottom.onmouseout=function() {timer3=setInterval(Move3,1)};
};
</script>
</head>
<div id="Left">
<div class="left">
<div id="left1">
<a href="javascrippt:;"><img src="cat/1.jpg" /></a>
<a href="javascrippt:;"><img src="cat/2.jpg" /></a>
<a href="javascrippt:;"><img src="cat/3.jpg" /></a>
<a href="javascrippt:;"><img src="cat/4.jpg" /></a>
</div>
<div id="left2"></div>
</div>
</div>
<div id="Top">
<div class="left">
<div id="left3">
<a href="javascrippt:;"><img src="cat/1.jpg" /></a>
<a href="javascrippt:;"><img src="cat/2.jpg" /></a>
<a href="javascrippt:;"><img src="cat/3.jpg" /></a>
<a href="javascrippt:;"><img src="cat/4.jpg" /></a>
</div>
<div id="left4"></div>
</div>
</div>
<div id="Right">
<div class="right">
<div id="right1">
<a href="javascrippt:;"><img src="cat/1.jpg" /></a>
<a href="javascrippt:;"><img src="cat/2.jpg" /></a>
<a href="javascrippt:;"><img src="cat/3.jpg" /></a>
<a href="javascrippt:;"><img src="cat/4.jpg" /></a>
</div>
<div id="right2"></div>
</div>
</div>
<div id="Bottom">
<div class="right">
<div id="right3">
<a href="javascrippt:;"><img src="cat/1.jpg" /></a>
<a href="javascrippt:;"><img src="cat/2.jpg" /></a>
<a href="javascrippt:;"><img src="cat/3.jpg" /></a>
<a href="javascrippt:;"><img src="cat/4.jpg" /></a>
</div>
<div id="right4"></div>
</div>
</div>
</body>