html5 图形水平运动,JavaScript动画--水平运动和透明度

水平运动-透明度

* {

padding: 0;

margin: 0;

}

div {

width: 200px;

height: 200px;

background: #9FF;

filter:Alpha(opacity:30);

opacity: 0.3;

position: relative;

top: 0;

left: 200px;

float: left;

margin-right: 20px;

margin-bottom: 20px;

border: 1px dotted #0F0;

}

#div6, #div7, #div8 {

top: 220px;

background: yellow;

float: none;

filter:Alpha(opacity:100);

opacity: 1;

border: 1px dotted #999;

}

div span {

width: 50px;

height: 50px;

position: absolute;

top: 50px;

left: 50px;

padding: 25px;

color: #99F;

font-weight: bold;

text-align: center;

line-height: 50px;

}

#div6 span, #div7 span, #div8 span {

color: #3FF;

}

window.οnlοad=function(){

var ODivList = document.getElementsByName('row');

for (var i = 0; i < ODivList.length; i++ ){

ODivList[i].timer = null;

ODivList[i].alpha = 30;

ODivList[i].οnmοuseοver= function(){

move(this,'opacity',100);

}

ODivList[i].onmouseout = function(){

move(this,'opacity',30);

}

}

var ODivListCol = document.getElementsByName('col');

for (var i = 0; i < ODivListCol.length; i++ ){

ODivListCol[i].timer = null;

ODivListCol[i].οnmοuseοver= function(){

move(this,'width',1088);

}

ODivListCol[i].onmouseout = function(){

move(this,'width',200);

}

}

}

function move(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var curWidth =0;

if(attr == 'opacity'){

curWidth = Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

curWidth = parseInt(getStyle(obj,attr));

}

var speed = (iTarget - curWidth)/5;

speed = (speed > 0 ? Math.ceil(speed):Math.floor(speed));

if(curWidth == iTarget){

clearInterval(obj.timer);

}else{

if(attr == 'opacity'){

obj.style[attr] = (curWidth + speed)/100;

obj.style[attr] = 'Alpha(opacity:' + (curWidth + speed) + ')';

}else{

obj.style[attr] = curWidth + speed +'px';

}

}

},30);

}

function getStyle(obj,attr){

if(obj.curentStyle){//IE

return obj.currentStyle[attr];

}else{//firefox

return getComputedStyle(obj,false)[attr];

}

}

One

Two

Three

Four

Five

One

Two

Three