1. 程式人生 > >js動畫(速度)

js動畫(速度)

fun esc move keywords nload desc func cache scale

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><meta name="keywords" content=""><meta name="description" content=""><meta http-equiv="Cache-Control" content="no-transform" /><style>*{margin:0px;}#div1{width:200px;height:200px;position: absolute;left:-200px;background: #0f0}#div1 span{width:20px;height:50px;position: absolute;top: 80px;left:200px;background: #0ff}</style><script> window.onload = function(){ var odiv1 = document.getElementById("div1"); odiv1.onmouseover = function(){ move(0); } odiv1.onmouseout = function(){ move(-200); } } var timer = null; function move(mubiao){ var odiv1 = document.getElementById("div1"); timer = setInterval( function (){ var speed = 0; if(odiv1.offsetLeft>mubiao){ speed = -10; }else { speed = 10; } if(odiv1.offsetLeft == mubiao){ clearInterval(timer); } else{ odiv1.style.left = odiv1.offsetLeft + speed +‘px‘; } }, 30) }</script></head><body> <div id="div1" ><span></span></div></body></html>

js動畫(速度)