<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
div{
height:?200px;
width:?100px;
background-color:?red;
margin:?20px;
float:?left;
}
</style>
<script?type="text/javascript">
window.onload?=?function()?{
var?dv?=?document.getElementsByTagName('div');
//給DIV綁定鼠標(biāo)移入事件
for(var?i=0;i<dv.length;i++){
dv[i].timer??=?null;
dv[i].onmouseover?=?function(){
starMove(this,'width',500)
}
}?????????????????????
??????????????????????//創(chuàng)建一個獲取外部樣式的函數(shù)
???????????function?getStyle(obj,name){
????????????if(obj.currentStyle){
?????????????????return?obj.currentStyle[name];
????????????}else?{
????????????return?getComputedStyle(obj,false)[name];
????????????}
???????????}
???????????//運動函數(shù)
???????????function?starMove(obj,atr,target){
??????????????clearInterval(obj.timer);
??????????????var?cur?=?parseInt(getStyle(obj,atr))
??????????????obj.timer?=?setInterval(function(){
????????????????var?speed?=?(target?-?cur)/6;
??????????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
??????????????if(cur==target){
??????????????????????clearInterval(obj.timer)
??????????????}else?{
?????????????????
?????????????????obj.style[atr]?=?cur?+?speed?+'px';
?????????????????
??????????????}
??????????????},30);
?????????????
???????????}
}
</script>
</head>
<body>
<div?id="d1"></div>
<div?id="d2"></div>
<div?id="d3"></div>
</body>
</html>運行后無法正確執(zhí)行運動= = 定時器只能執(zhí)行一次 就只移動一下 再移入還是會移動 最終會到500 球各位大神找下錯誤 感激不盡
Js多物體運動框架定時器失效。(只能一幀一幀的動)
火光余見3658736
2016-09-17 17:42:25