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

随机推荐

XStream解析
package com.baidu.farment; import java.io.IOException;import java.util.ArrayList;import java.util.Li ...
Servlet 中文乱码问题及解决方案剖析
转自:http://blog.csdn.net/xiazdong/article/details/7217022/ 一.常识了解 1.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK ...
工作中遇到的问题--JPA 一对多查询
/** * order by gs.updateDate desc * SELECT gs FROM GoodStatus gs WHERE gs IN( * @ ...
Python字符串操作
isalnum()判断是否都是有效字符串 >>> ev1 = 'evilxr' >>> ev2 = 'ev1il2xr3' >>> ev3 = ' ...
释放Linux系统预留的硬盘空间【转】
http://www.cnblogs.com/ggjucheng/archive/2012/10/07/2714294.html 前言大多数文件系统都会保留一部分空间留作紧急情况时用(比如硬盘空间满 ...
【转】IOS学习笔记29—提示框第三方库之MBProgressHUD
原文网址:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...
（转） Deep Learning in a Nutshell: Core Concepts
Deep Learning in a Nutshell: Core Concepts Share: Posted on November 3, 2015by Tim Dettmers 7 Comm ...
c3p0操作MySQL数据库
使用c3p0连接MySQL数据库并对MySQL数据库进行基本操作. 1. [文件] 数据库准备 ~ 226B 下载(64) ? 1 2 3 4 5 6 7 8 9 10 ##创建数据库 ...
Linux perf tools
http://techblog.netflix.com/2015/08/netflix-at-velocity-2015-linux.html
mysql学习之-逻辑架构
mysql逻辑架构图: 第一层,服务层(为客户端服务):为请求做连接处理,授权认证,安全等. 1. 每个连接的查询都在一个进程中的线程完成. 2. 服务器负责缓存线程,所以服务层不需要为每个连接新 ...

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

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

随机推荐

热门专题