兼容所有浏览器---无缝上下左右交叉运动----原生js+css

兼容所有浏览器---无缝上下左右交叉运动----原生js+css

<!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>

【推广】免费学中医，健康全家人

原文地址：https://www.cnblogs.com/lixuekui/p/5768701.html