-
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); //運行結(jié)束時是小數(shù)，進行取值判斷 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來改變透明度查看全部
-
連貫：查看全部
-
第二部 ：查看全部
-
第一步：查看全部
-
對比上節(jié)課代碼查看全部
-
感覺不對查看全部
-
eeeee查看全部
-
動畫效果查看全部
-
1速度 2緩沖運動（先慢后快） 3多物體運動（2個或多個） 4任意值的變化 5鏈?zhǔn)竭\動（高-寬） 6同時運動（變高寬）查看全部
舉報
0/150
提交
取消