-
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; //緩沖運(yùn)動(dòng) speed = speed>0?Math.ceil(speed):Math.floor(speed); //運(yùn)行結(jié)束時(shí)是小數(shù)，進(jìn)行取值判斷 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>緩沖運(yùn)動(dòng)</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;通過(guò)比較和target的值，通過(guò)speed步長(zhǎng)累加來(lái)賦值給opacity來(lái)改變透明度查看全部
-
連貫：查看全部
-
第二部 ：查看全部
-
第一步：查看全部
-
對(duì)比上節(jié)課代碼查看全部
-
感覺(jué)不對(duì)查看全部
-
eeeee查看全部
-
動(dòng)畫(huà)效果查看全部
-
1速度 2緩沖運(yùn)動(dòng)（先慢后快） 3多物體運(yùn)動(dòng)（2個(gè)或多個(gè)） 4任意值的變化 5鏈?zhǔn)竭\(yùn)動(dòng)（高-寬） 6同時(shí)運(yùn)動(dòng)（變高寬）查看全部
舉報(bào)
0/150
提交
取消