多物体改变是单物体运动，各路大神看下错了那
宝慕林2917688
2016-08-29 00:10
<script type="text/javascript">
window.onload=function(){
var ali=Document.getElementsByTagName("li");
ali.onmousemover=function(){
startMove(this,400);
}
ali.onmouseout=function(){
startMove(this,200);
}
}
var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=speed>0?-10:10;
if(obj.offsetWidth==target){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30)
}
</script>
1回答
-
- Freestyle文
- 2016-08-29 09:48:41
同学 我也是新人 我不知道我说的能不能帮到你 但是我还是说下我自己的拙见 首先 第一 document首字母不能大写的 其次因为我不知道你的整个静态页面是什么结构 如果是老师讲的那个的话 首先 你获取的ali是一个数组 要进行循环语句才能多物体运动
for(var i=0;i<ali.length;i++){
ali[i].onmousemover=function(){
startMove(this,400);
}
ali[i].onmouseout=function(){
startMove(this,200);
}} 最后就是你的速度判断我不太懂 没有初始速度 也没有赋值判定 不太理解怎么去做这个判断，这里我按我个人想法提供两种判断第一种匀速
var speed=0;
if(target==400){
speed=10;
}
else if(target==200){
speed=-10;
}
第二种就是老师说的
var speed = (iTarget-obj.offsetWidth)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
最后代码统计如下
window.onload=function(){
var ali=document.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
ali[i].onmouseover=function(){
startMove(this,400);
}
ali[i].onmouseout=function(){
startMove(this,200);
}
}
}
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=0;
if(target==400){
speed=10;
}
else if(target==200){
speed=-10;
}
if(obj.offsetWidth==target){
clearInterval(timer);
}
else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30)
}
希望能帮到你
JS动画效果
113923 学习 · 1443 问题
相似问题