1.JS運(yùn)動(dòng)基礎(chǔ)
運(yùn)動(dòng)框架
在開(kāi)始運(yùn)動(dòng)時(shí)头谜，關(guān)閉已有定時(shí)器
把運(yùn)動(dòng)和停止隔開(kāi)(if/else)
1.勻速運(yùn)動(dòng)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>01-運(yùn)動(dòng)基礎(chǔ)</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
</style>
<script>
//定時(shí)器
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
//為了保證只有一個(gè)定時(shí)器工作,把之前的定時(shí)器全關(guān)了
clearInterval(timer);
timer=setInterval(function (){
var speed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="開(kāi)始運(yùn)動(dòng)" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>
勻速運(yùn)動(dòng)
- 2.分享到
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
startMove(0);
};
oDiv.onmouseout=function ()
{
startMove(-150);
};
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
//先初始化速度
var speed=0;
//開(kāi)始位置 > 終點(diǎn)位置:比方 起點(diǎn):350 終點(diǎn) 50 要想到50這個(gè)位置,速度得為:-10;
//oDiv.offsetLeft : 起點(diǎn)位置
//iTarget終點(diǎn)位置
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
}
//這個(gè)函數(shù)存在一個(gè)漏洞,如果oDiv.offsetLef 剛好t >=iTarget 定時(shí)器不會(huì)停止
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
分享到
- 3.淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-淡入淡出</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
opacity:0.3; //兼容chrome和ff
filtr:alpha(opacity:30);//兼容低版本的IE
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function () {
changeAlpha(100);
};
oDiv.onmouseout = function () {
changeAlpha(30);
};
var timer = null;
var alpha = 30;
function changeAlpha(isTarget) {
clearInterval(timer);
var speed = 0;
timer = setInterval(function () {
//注意這個(gè)速度判斷要寫(xiě)在定時(shí)器里面
if (alpha < isTarget){
speed = 10;
}else {
speed = -10;
}
if (alpha == isTarget){
clearInterval(timer);
}else {
alpha += speed;
oDiv.style.opacity = alpha/100;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}
},30);
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>
淡入淡出
3.緩沖運(yùn)動(dòng)
- 逐漸變慢业稼，最后停止
- 距離越遠(yuǎn)速度越大
- 速度由距離決定
- 速度=(目標(biāo)值-當(dāng)前值)/縮放系數(shù)
Math.ceil():向上取整 Math.ceil(3.41) 結(jié)果是4 ,Math.ceil(-9.8) 結(jié)果是 -9;
Math.floor():向下取整 Math.floor(-0.9) 結(jié)果是 -1;
- 例子：緩沖菜單
Bug：速度取整,取小數(shù)會(huì)出事!!!
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
*{
padding: 0;
margin: 0;
}
#div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
var speed=(300-oDiv.offsetLeft)/10;
//緩沖運(yùn)動(dòng)一定要取整,否則會(huì)出事的!!!!
//Math.ceil():向上取整 Math.ceil(3.41) 結(jié)果是4 ,Math.ceil(-9.8) 結(jié)果是 -9;
//Math.floor():向下取整 Math.floor(-0.9) 結(jié)果是 -1;
//speed=Math.floor(speed);
//速度大于0,向上取整,速度小于0,向下取整;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//速度不能為小數(shù):速度里面有小數(shù),導(dǎo)致oDiv.style.left的值帶有小數(shù),而oDiv.style.left會(huì)自動(dòng)取整,導(dǎo)致他把小數(shù)抹掉了,導(dǎo)致誤差!!!
//故把速度向上取整,來(lái)避免此誤差
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+','+speed;
}, 30);
}
</script>
</head>
<body>
<input type="button" value="開(kāi)始運(yùn)動(dòng)" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
緩沖運(yùn)動(dòng)一(chorme瀏覽器上有兼容問(wèn)題)
- 跟隨頁(yè)面滾動(dòng)的緩沖側(cè)邊欄
- 潛在問(wèn)題：目標(biāo)值不是整數(shù)時(shí),會(huì)出現(xiàn)抖動(dòng)的情況,只要強(qiáng)轉(zhuǎn)成整數(shù)就可以了!可能會(huì)有0.5像素的誤差,可以忽略不計(jì)!
右側(cè)懸浮框
先了解下一些基礎(chǔ)知識(shí)
獲取瀏覽器滾動(dòng)條滾動(dòng)的距離
1.在設(shè)計(jì)頁(yè)面時(shí)可能經(jīng)常會(huì)用到固定層的位置，這就需要獲取一些html對(duì)象的坐標(biāo)以更靈活的設(shè)置目標(biāo)層的坐標(biāo)，這里可能就會(huì)用到document.body.scrollTop等屬性隧哮，但是此屬性在xhtml標(biāo)準(zhǔn)網(wǎng)頁(yè)或者更簡(jiǎn)單的說(shuō)是帶<!DOCTYPE ..>標(biāo)簽的頁(yè)面里得到的結(jié)果是0，如果不要此標(biāo)簽則一切正常座舍，那么在xhtml頁(yè)面怎么獲得body的坐標(biāo)呢沮翔，當(dāng)然有辦法-使用document.documentElement來(lái)取代document.body,可以這樣寫(xiě)
例：
獲取瀏覽器滾動(dòng)條滾動(dòng)的距離
var top = document.documentElement.scrollTop || document.body.scrollTop;
在JavaScript里||是個(gè)好東西，除了能用在if等條件判斷里簸州，還能用在變量賦值上鉴竭。那么上例等同于下例。
例：var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
這么寫(xiě)可以得到很好的兼容性岸浑。
相反搏存，如果不做聲明的話，document.documentElement.scrollTop反而會(huì)顯示為0矢洲。
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?br>
document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
<html>
<head>
<meta charset="utf-8">
<title>右側(cè)懸浮窗</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
window.onscroll=function ()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=(iTarget-oDiv.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
}, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
右側(cè)懸浮窗
勻速停止
//絕對(duì)值,
Math.abs()
比如:(Math.abs(-6)) 和 (Math.abs(6))結(jié)果都是6,他的意思就是把值變成沒(méi)有正負(fù)號(hào)的樣子,都是正的.
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(oDiv.offsetLeft<iTarget)
{
speed=10;
}
else
{
speed=-10;
}
//目標(biāo)和物體之間的距離的絕對(duì)值小于等于速度,就算他達(dá)到目標(biāo)了.
if(Math.abs(iTarget-oDiv.offsetLeft)<=Math.abs(speed))
{
clearInterval(timer);
//目標(biāo)和物體之間的有一小小的距離,計(jì)算誤差導(dǎo)致的.
//讓left直接等于目標(biāo)點(diǎn)
oDiv.style.left=iTarget+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
勻速停止
Math.round();四舍五入
