兼容所有浏览器---无缝上下左右交叉运动----原生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;
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.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>

</div>

</body>

兼容所有浏览器---无缝上下左右交叉运动----原生js+css的更多相关文章

使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
原生JS+CSS实现日期插件
笔者最近在学习Element UI,觉得它提供的日期选择器既简单又美观,于是仿照着写了一个日期插件.笔者使用到的技术有ES5.CSS和HTML,控件兼容IE10+和谷歌浏览器.有一点需要注意,笔者使用 ...
Thymeleaf模板引擎绕过浏览器缓存加载静态资源js,css文件
浏览器会缓存相同文件名的css样式表或者javascript文件.这给我们调试带来了障碍,好多时候修改的代码不能在浏览器正确显示. 静态常见的加载代码如下: <link rel="st ...
3D视觉差---原生js+css
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
Zclip:复制页面内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
JavaScrip 原生多文件上传及预览兼容多浏览器
JavaScrip 原生多文件上传及预览兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...
兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

随机推荐

ZOJ 1002 Fire Net
题目大意:有一个4*4的城市,其中一些格子有墙(X表示墙),在剩余的区域放置碉堡.子弹不能穿透墙壁.问最多可以放置几个碉堡,保证它们不会相互误伤. 解法:从左上的顶点开始遍历,如果这个点不是墙,做深度 ...
CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
php部分---人员表和民族表的显示、修改、删除
1.连接数据库进行网页的显示 <table width="100%" border="1" cellpadding="0" cell ...
学霸网站之NABCD
1.需求(Need) 随着社会的发展,互联网产业得到了飞速的发展,如今,互联网在各个领域都取得了至关重要的作用,随之而来的数量庞大的数据也让我们每个人在学习生活中倍感压力,如何才能在这些数据中找到自己 ...
centos rm 回收站
桌面版本的linux就默认有,非桌面版本貌似没(反正我没找到) linux rm删除文件之后,恢复就比较麻烦了,即使恢复了,文件名格式都变成一串数字了. 修改root用户的环境变量 vi ~/.bas ...
POJ-2486 Apple Tree （树形DP）
题目大意:一棵点带权有根树,根节点为1.从根节点出发,走k步,求能收集的最大权值和. 题目分析:从一个点向其某棵子树出发有三种可能的情况: 1.停留在那棵子树上: 2.再回到这个点: 3.经过这个点走 ...
转贴：sudo apt-get install 可以安装的一些软件
Ubuntu 下的一些软件安装sudo apt-get install virtualbox#华主席推荐 2007年年度最佳软件,最佳编辑选择奖得主.....sudo apt-get install ...
使用swiper和吸顶效果代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
【转】asp.net导出数据到Excel的三种方法
来源:http://www.cnblogs.com/lishengpeng1982/archive/2008/04/03/1135490.html 原文出处:http://blog.csdn.net/ ...
Python文件处理之文件写入方式与写缓存（三）
Python的open的写入方式有: write(str):将str写入文件 writelines(sequence of strings):写多行到文件,参数为可迭代对象首先来看下writelin ...

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

兼容所有浏览器---无缝上下左右交叉运动----原生js+css的更多相关文章

随机推荐

热门专题