原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫(huà)效果

更新時(shí)間：2016年02月26日 14:13:24 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文向大家介紹一個(gè)javascript實(shí)現(xiàn)的動(dòng)畫(huà)。點(diǎn)擊開(kāi)始按鈕div會(huì)往右移動(dòng)，點(diǎn)擊停止后，div停止移動(dòng)，再點(diǎn)擊則繼續(xù)移動(dòng)。請(qǐng)看下面代碼：

<html> 
<head> 
<meta charset="gb2312"> 
<head>
<title>javascript實(shí)現(xiàn)的簡(jiǎn)單動(dòng)畫(huà)</title>
<style type="text/css">
#mydiv
{
 width:50px;
 height:50px;
 background-color:green;
 position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
 var mydiv=document.getElementById("mydiv");
 var start=document.getElementById("start");
 var stopmove=document.getElementById("stopmove");
 var x=0;
 var flag;
 function move()
 {
  x=x+1;
  mydiv.style.left=x+"px";
 }
 start.onclick=function()
 {
  clearInterval(flag);
  flag=setInterval(move,20);
 }
 stopmove.onclick=function()
 {
  clearInterval(flag);
 }
 
}
</script>
<body>
<input type="button" id="start" value="開(kāi)始運(yùn)動(dòng)" />
<input type="button" id="stopmove" value="停止運(yùn)動(dòng)" />
<div id="mydiv"></div>
</body>
</html>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript原始值和對(duì)象引用實(shí)例分析
這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下
2015-04-04
JavaScript判斷DOM何時(shí)加載完畢的技巧
處理HTML DOM文檔存在一個(gè)難題是，JavaScript可以在DOM完全加載之前執(zhí)行，這會(huì)給你的代碼引發(fā)不少的潛在問(wèn)題;針對(duì)這個(gè)問(wèn)題，本文給予適當(dāng)?shù)慕鉀Q方法，僅供參考
2012-11-11
JScript內(nèi)置對(duì)象Array中元素的刪除方法
JScript內(nèi)置對(duì)象Array中元素的刪除方法...
2007-03-03
ES6的新特性概覽
Nick Justice是GitHub開(kāi)發(fā)者計(jì)劃的一員。早在ES6語(yǔ)言標(biāo)準(zhǔn)發(fā)布之前，他就借助像Babel這樣的轉(zhuǎn)譯器以及最新版本的瀏覽器在自己的項(xiàng)目中使用ES6特性。他認(rèn)為，ES6的新特性將極大地改變JavaScript的編寫(xiě)方式
2016-03-03
JS煙花背景效果實(shí)現(xiàn)方法
這篇文章主要介紹了JS煙花背景效果實(shí)現(xiàn)方法,實(shí)例分析了javascript操作dom元素實(shí)現(xiàn)煙花特效的技巧,需要的朋友可以參考下
2015-03-03
JavaScript?WebGL?圖片透明處理的方式
WebGL 透明處理方式之一是使用 α 混合，這篇文章主要介紹了JavaScript?WebGL?圖片透明處理方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
JavaScript防止表單重復(fù)提交的方法
在web開(kāi)發(fā)中，防止表單的重復(fù)提交是一個(gè)非常重要的環(huán)節(jié)。重復(fù)提交會(huì)導(dǎo)致數(shù)據(jù)混亂，甚至可能導(dǎo)致系統(tǒng)崩潰，今天我們將帶領(lǐng)大家從小白級(jí)別到大神級(jí)別的程序員，一起來(lái)學(xué)習(xí)如何在實(shí)際項(xiàng)目中避免表單的重復(fù)提交
2023-04-04
js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
js window.onload 加載多個(gè)函數(shù)的方法
平時(shí)做項(xiàng)目經(jīng)常需要使用window.onload，但window.onload 不能同時(shí)加載多個(gè)函數(shù)。
2009-11-11
javaScript 動(dòng)態(tài)訪問(wèn)JSon元素示例代碼
訪問(wèn)JSon元素的方法有很多，在搜的時(shí)候會(huì)找到很多，本文使用javascript來(lái)動(dòng)態(tài)訪問(wèn)json元素，感興趣的朋友可以練練手哦
2013-08-08