除ie6-浏览器---无缝上下左右交叉运动----原生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;
}

#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;
}

#Right {
float:left;
margin:150px 0 0 0;
background: #FFF;
overflow:hidden;
border: 0px dashed #CCC;
width: 500px;
height:150px;
border:5px solid #ccc;
}

#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>
<body>
<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>
<script language=JavaScript src="cat/my.js"></script>

</body>

---恢复内容结束---

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

#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>
<body>
<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>
<script language=JavaScript src="cat/my.js"></script>

</body>
时间： 2024-10-28 05:08:23

除ie6-浏览器---无缝上下左右交叉运动----原生js+css的相关文章

兼容IE6浏览器的最大高度和最小高度css代码

兼容IE6浏览器的最大高度和最小高度css代码:IE6浏览器是不支持最大高度和最小高度属性的,下面就通过兼容性措施实现此功能.一.最大高度效果: .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); } 二.最小高度效果: .min_height{ min-height:200px; _height:expression(th

原生js+css实现二级伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现二级伸缩菜单</title> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .closed{ display: block; width: 200px; ba

3D视觉差---原生js+css

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> <style> * { padding: 0; margin: 0; }body { background: #42509a; } u

Java学习总计（二十六）——JavaScript正则表达式，Js表单验证,原生js+css页面时钟

一．JavaScript正则表达式1.exec检索字符串中指定的值,返回找到的值,并确定其位置2.test检索字符串中指定的值,返回true或false3.正则表达式对象的创建:(1)方式一:Var rgex=new RegExp("[0-9]","模式");(2)方式二:简便写法,用双斜杠//把正则表达式的内容括起来例1(正则创建,使用test()方法): <!DOCTYPE html> <html> <head> <me

原生JS 封装运动函数

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶. /* - obj 指的是DOM对象 - json 指的是 CSS样式 - 例 startMove(oDiv,{width:100,height:100},function(){}) */ function startMove(obj,json,fnEnd){ clearInterval(obj

使用原生JS实现一个风箱式的demo，并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. 1 function getStyle(obj,attr) { 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr];//为了获取IE下的属性值 4 }else{ 5 return window.getComputedStyle(ob

跨浏览器的placeholder – 原生JS版

转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提供对输入字段预期值的提示信息,input为空且未获得焦点时显示,获得焦点时消失,非常实用.目前,大部分现代浏览器都对placeholder属性提供了支持,IE10也是支持的.如果需要使IE6~IE9等浏览器支持placeholder,只有借助js了. 在这些不支持原生placeholder属性的浏览

原生JS简单的无缝自动轮播

最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"

IE6 浏览器常见兼容问题 共23个

1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁. 产生条件:不同浏览器: 解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置. 3.横向双倍外边距 产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象. 解决办法: 在float标签的样式控制中加入display:inl