欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果的方法

 更新時(shí)間：2013年07月20日 16:13:12   作者：  
大家在使用Dreamweaver中的時(shí)間線(xiàn)功能或以做出很有趣的動(dòng)畫(huà)效果，Dreamweaver會(huì)自動(dòng)為用戶(hù)生成特定的程序代碼，大家有沒(méi)有想過(guò)動(dòng)畫(huà)的實(shí)現(xiàn)原理呢？
其實(shí)原理是很簡(jiǎn)單的，主要是使用了一個(gè)計(jì)時(shí)器函數(shù)，下面我為大家
演示一個(gè)簡(jiǎn)單的動(dòng)畫(huà)的制作過(guò)程，通過(guò)有關(guān)的介紹，大家可以舉一反三，做出更多很炫的動(dòng)畫(huà)效果。
　　這個(gè)實(shí)例的效果是點(diǎn)擊網(wǎng)頁(yè)上的“開(kāi)始移動(dòng)”按鈕，則其中的指定圖層就會(huì)從左到右移動(dòng)，在這個(gè)過(guò)程中你點(diǎn)擊“停止移動(dòng)”按鈕就會(huì)停止移動(dòng)。
復(fù)制代碼 代碼如下:

　　<html>
　　<head>
　　<title>JavaScript Motion Sample</title>
　　<script language="JavaScript">
　　var movingID = null;
　　var scrolling = false;
　　function startMove()
　　{
　　 var left = eval(div1.style.left.replace("px", ""));
　　 if (left < document.body.scrollWidth - 150)
　　  div1.style.left = left + 1;
 　　else
 　　 div1.style.left = 10;
　　 movingID = setTimeout("startMove()", 10);
　　}
　　function stopMove()
　　{
　　 clearTimeout(movingID);
　　}
　　</script>
</head>
　　<body>
　　<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">
　　 <table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">
　　  <tr>
　　   <td>I can moving...</td>
　　  </tr>
　　 </table>
　　</div>
　　<br><br>
　　<input type="button" value="開(kāi)始移動(dòng)" onClick="startMove()">
　　<input type="button" value="停止移動(dòng)" onClick="stopMove()">
　　　</body>
　　</html>

　　這里主要使用了一個(gè)叫setTimeout(function, interval)函數(shù)，這個(gè)函數(shù)的參數(shù)格式為：
　　第一個(gè)參數(shù)“function”為超時(shí)后調(diào)用的函數(shù)名，第二個(gè)參數(shù)“interval”為超時(shí)值，以微秒為單位。
　　注意一點(diǎn)是如果要停止這個(gè)計(jì)時(shí)器，必須保存調(diào)用這個(gè)setTimeout()函數(shù)后的返回值，通過(guò)clearTimeout(id)函數(shù)來(lái)取消計(jì)時(shí)器。

相關(guān)文章

  • 細(xì)品javascript 尋址,閉包,對(duì)象模型和相關(guān)問(wèn)題

    細(xì)品javascript 尋址,閉包,對(duì)象模型和相關(guān)問(wèn)題

    似乎某些程序員的集合是不相交的，就好像JS程序員和玩編譯原理和CPU指令的匯編程序員就幾乎沒(méi)有交叉。前些日子討論的火熱的“作用域鏈”問(wèn)題，說(shuō)白了就是尋址問(wèn)題，不過(guò)，這個(gè)在C中十分簡(jiǎn)單的問(wèn)題卻被JS這個(gè)動(dòng)態(tài)語(yǔ)言弄得很復(fù)雜。
    2009-04-04
  • 可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼

    可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼

    可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼，非常不錯(cuò)的應(yīng)用，大家可以參考下。
    2009-08-08
  • js百度地圖滾輪縮放所在點(diǎn)偏移問(wèn)題解決

    js百度地圖滾輪縮放所在點(diǎn)偏移問(wèn)題解決

    本文主要介紹了js百度地圖滾輪縮放所在點(diǎn)偏移問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • js之如何篩選出兩個(gè)數(shù)組相同的值

    js之如何篩選出兩個(gè)數(shù)組相同的值

    這篇文章主要介紹了js之如何篩選出兩個(gè)數(shù)組相同的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • 微信小程序之 catalog 切換實(shí)現(xiàn)解析

    微信小程序之 catalog 切換實(shí)現(xiàn)解析

    這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • gridview生成時(shí)如何去掉style屬性中的border-collapse

    gridview生成時(shí)如何去掉style屬性中的border-collapse

    默認(rèn)gridview控件會(huì)在生成的html代碼中的style屬性中加入border-collapse:collapse，如果想把它去掉的話(huà)
    2014-09-09
  • 微信小程序iOS下拉白屏晃動(dòng)問(wèn)題解決方案

    微信小程序iOS下拉白屏晃動(dòng)問(wèn)題解決方案

    這篇文章主要介紹了微信小程序iOS下拉白屏晃動(dòng)問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • JS中的JSON對(duì)象的定義和取值實(shí)現(xiàn)代碼

    JS中的JSON對(duì)象的定義和取值實(shí)現(xiàn)代碼

    這篇文章主要介紹了JS中的JSON對(duì)象的定義和取值實(shí)現(xiàn)代碼,也是json的入門(mén)知識(shí)，需要的朋友可以參考下
    2018-05-05
  • JS中間件設(shè)計(jì)模式的深入探討與實(shí)例分析

    JS中間件設(shè)計(jì)模式的深入探討與實(shí)例分析

    這篇文章主要介紹了JS中間件設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了JS中間件設(shè)計(jì)模式功能、原理、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • 微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法示例

    微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法示例

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法，分別是navigator跳轉(zhuǎn)時(shí)、全局變量、列表index下標(biāo)取值以及form表單傳值的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01

最新評(píng)論