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

weixin_33749131

于 2016-08-13 19:53:00 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/lixuekui/p/5768701.html

版权

<!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;
width: 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;
width: 150px;
border:5px solid #ccc;
zoom:1;
}

#Left .left {
float: left;
width: 500%;
}

#Top .left {
float: left;
width: 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{
width: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;
width: 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;
width: 150px;
border:5px solid #ccc;
}

#Right .right {
float: left;
width: 500%;
}

#Bottom .right {
float: left;
width: 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{
width: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.οnmοuseοver=function() {clearInterval(timer)};
oLeft.οnmοuseοut=function() {timer=setInterval(Move,1)};

oTop.οnmοuseοver=function() {clearInterval(timer1)};
oTop.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(timer2)};
oRight.οnmοuseοut=function() {timer2=setInterval(Move2,1)};

oBottom.οnmοuseοver=function() {clearInterval(timer3)};
oBottom.οnmοuseοut=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

weixin_33749131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容所有浏览器---无缝上下左右交叉运动----原生js+css

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{padding:0;margin:0;}img{vertical-align:top;border:none;}a{t...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。