-
xia:<script type="text/javascript"> window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(0); } odiv.onmouseout=function(){ move(-200); } } var timer=null; function move(target){ clearInterval(timer); odiv=document.getElementById("div1"); timer = setInterval(function(){ var speed=(target-odiv.offsetLeft)/20; //缓冲运动 speed = speed>0?Math.ceil(speed):Math.floor(speed); //运行结束时是小数，进行取值判断 if(odiv.offsetLeft==target){ clearInterval(timer); }else{ odiv.style.left =odiv.offsetLeft + speed+"px"; //变大 } },30) } </script> <body> <div id="div1"><span id="share">分享</span></div> </body> </html>查看全部
-
3ke :<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>缓冲运动</title> </head> <style type="text/css"> body{padding:0; margin:0;} #div1{ width:200px; height:200px; background:#f00; position:relative; top:0; left:-200px; } #div1 span{ width:20px; height:70px; background:#0f0; position:absolute; top:75px; left:200px; } </style> <script type="text/javascript"> window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(0); } odiv.onmouseout=function(){ move(-200); } } var timer=null;查看全部
-
var timer=null; var alpha=30;查看全部
-
2课 body{margin:0; padding:0;} div{width:200px; height:200px; background:#f00; filter:opacity(30); opacity:0.3; } window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(100); } odiv.onmouseout=function(){ move(30); } } function move(target){ odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-10; }else{ speed=10; } if(alpha==target){ clearInterval(timer); }else{ alpha += speed; odiv.style.filter="alpha(opacity:"+alpha+")"; odiv.style.opacity=alpha/100; } },500) };查看全部
-
改2：function out(target,speed){ odiv=document.getElementById("div1"); clearInterval(timer); setInterval(function(){ if(odiv.offsetLeft<=target){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+speed+"px"; } },500); } 该3：//改 3： function move(target){ clearInterval(timer); odiv=document.getElementById("div1"); timer = setInterval(function(){ var speed=0; if(odiv.offsetLeft>target){ speed = -10; }else{ speed=10; } if(odiv.offsetLeft>=target){ clearInterval(timer); }else{ odiv.style.left =odiv.offsetLeft + speed+"px"; //变大 } },500); }查看全部
-
1：第一次<body> <div id="div1"><span id="share">分享</span></div> </body> div{ width:200px; height:200px; background:#f00; position:relative; top:0; left:-200px; } div span{ width:20px; height:70px; background:#0f0; position:absolute; top:75px; left:200px; } window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ // 1:move(); // 2:move(10,0); move(0); } odiv.onmouseout=function(){ // 1:out(); // 2:move(-10,-200); move(-200); } } function out(){ odiv=document.getElementById("div1"); clearInterval(timer); setInterval(function(){ if(odiv.offsetLeft<=-200){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft-10+"px"; } },500); }查看全部
-
var alpha = 30;通过比较和target的值，通过speed步长累加来赋值给opacity来改变透明度查看全部
-
连贯：查看全部
-
第二部 ：查看全部
-
第一步：查看全部
-
对比上节课代码查看全部
-
感觉不对查看全部
-
eeeee查看全部
-
动画效果查看全部
-
1速度 2缓冲运动（先慢后快） 3多物体运动（2个或多个） 4任意值的变化 5链式运动（高-宽） 6同时运动（变高宽）查看全部
举报
0/150
提交
取消