兼容所有浏览器---无缝上下左右交叉运动----原生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,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

随机推荐

整理的一些免费的Android项目实战系列视频教程
http://blog.itpub.net/29737144/viewspace-1212539/
POJ 3461 裸的KMP
直接贴代码吧 #include<cstdio> #include<cstring> ],T[]; ]; int n,m; void getfail() { f[] = ; f[ ...
Android拍照保存图片内存大小
图片拍摄的大小会随着硬件而变化,比如,像素高的相机拍出来的图片要比像素低的图片内存要大. 如此一来,针对机型可能调用camera app保存照片的时候,图片大小会不一样. 为了缩小图片大小,我们需要把 ...
exit()和_exit()函数
进程就好比人一样有其生命,我们通过fork()函数来创建一个进程,那么我们又是如何来中止进程呢. 进程退出 1.在Linux中任何让一个进程退出进程退出表示进程即将结束.在Linux中进程退出分为了 ...
Java动物声音模拟器
abstract class Animal{ abstract void cry(); abstract String getAnimalName(); } class Simulator{ void ...
AS3 Embed用法笔记
1. 用[Embed]元数据标签可以嵌入GIF,PNG,JPEG,或者MP3文件.ActionScript代码的顺序非常重要.你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Cl ...
jQuery Easing 动画效果扩展 ,全屏滚动案例
http://www.helloweba.com/view-blog-212.html $(element).animate({ height:500, width:600 } ...
ROM、RAM、DRAM、SRAM和FLASH区别
ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写. ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都 ...
Nginx-SSI
<a href="">点击</a> a
#你好Unity3D#Project脚本执行双击资源操作
Unity的Project里面放了很多游戏资源,比如脚本或者图片.正常情况下我们可以通过鼠标双击来进行打开.假如我现在不想主动双击打开,我想自动打开某个脚本或者图片再或者别的资源怎么办? 如下代码所示 ...

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

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

随机推荐

热门专题