在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ JavaScript動(dòng)畫(huà)
Javascript Math.log()方法
Javascript String.sub()方法
JavaScript表單驗(yàn)證
Javascript教程
Javascript String.fontsize()方法
Javascript Date.getUTCHours()方法
JavaScript運(yùn)算符
Javascript RegExp.ignoreCase屬性
Javascript Date.toLocaleDateString()方法
Javascript String.valueOf()方法
Javascript Date.setUTCMinutes()方法
JavaScript Switch Case
JavaScript Function() 構(gòu)造
Javascript Math.floor()方法
JavaScript頁(yè)面刷新
Javascript Math.abs()方法
Javascript Array.pop()方法
Javascript Boolean.valueOf（）方法
Javascript Number.MIN_VALUE
Javascript Date.parse()方法
Javascript Math.LOG10E屬性
Javascript Math.random()方法
Javascript Date.getYear()方法
Javascript Array.some()方法
Javascript Array.filter()方法
Javascript Array.join()方法
JavaScript for循環(huán)
Javascript String.localeCompare()方法
JavaScript語(yǔ)法
Javascript Array.length屬性
Javascript String.strike()方法
Javascript String.constructor屬性
JavaScript Date對(duì)象
Javascript Date.setYear()方法
Javascript Math.E屬性
Javascript Math.LN10屬性
Javascript Math.sqrt()方法
Javascript Array.reverse()方法
Javascript String.length屬性
Javascript RegExp.lastIndex屬性
Javascript Arrays對(duì)象
Javascript Boolean.toSource()方法
Javascript Date.valueOf()方法
JavaScript while循環(huán)
Javascript Date.getDate()方法
Javascript Date.toUTCString()方法
Javascript Math.SQRT2屬性
Javascript Array.lastIndexOf()方法
Javascript String.slice()方法
Javascript Date.getTime()方法
Javascript Date.getSeconds()方法
Javascript RegExp.toString()方法
Javascript String.replace()方法
Javascript Array.splice()方法
Javascript多媒體
Javascript Math.atan2()方法
Javascript Date.toString()方法
Javascript Date.getUTCMinutes()方法
Javascript Date.getFullYear()方法
Javascript Date.setDate()方法
Javascript Array.slice()方法
Javascript Math.ceil()方法
Javascript Date.getHours()方法
JavaScript事件
Javascript Math.pow()方法
Javascript Math.exp()方法
Javascript Date.getMonth()方法
Javascript Date.setUTCDate()方法
Javascript Array.reduce()方法
Javascript Date setUTCMilliseconds()方法
JavaScript文檔對(duì)象模型或DOM
Javascript String.blink()方法
Javascript Number.POSITIVE_INFINITY
Javascript Math.asin()方法
JavaScript動(dòng)畫(huà)
Javascript Number.MAX_VALUE
Javascript RegExp.global屬性
Javascript Date.getMinutes()方法
Javascript Date.UTC()方法
Javascript Date.getUTCMilliseconds()方法
Javascript Math.SQRT1_2屬性
Javascript Array.every()方法
Javascript String.anchor()方法
JavaScript if...else語(yǔ)句
Javascript Math.round()方法
Javascript Array.concat()方法
Javascript Boolean.toString()方法
Javascript Math.sin()方法
Javascript Math.max()方法
Javascript Date.setMilliseconds()方法
JavaScript對(duì)象
Javascript String.toLocaleLowerCase()方法
Javascript Math.min()方法
JavaScript傳統(tǒng)DOM
Javascript Array.unshift()方法
Javascript Date.toTimeString()方法
Javascript String.toString()方法
Javascript String.substring()方法
Javascript Array.constructor屬性
正則表達(dá)式和RegExp對(duì)象
Javascript Math.acos()方法
JavaScript Boolean.constructor()方法
Javascript RegExp.source屬性
Javascript Math.PI屬性
JavaScript W3C DOM
Javascript Date.setMinutes()方法
JavaScript Cookies
JavaScript循環(huán)控制
Javascript Array.push()方法
Javascript Date.getMilliseconds()方法
Javascript Date.getUTCSeconds()方法
Javascript String.charAt()方法
Javascript Date.getUTCFullYear()方法
JavaScript對(duì)話框
Javascript String.toUpperCase()方法
Javascript Math.atan()方法
Javascript Number.NEGATIVE_INFINITY
Javascript Date.getUTCDay()方法
Javascript String.search()方法
Javascript String.substr()方法
Javascript Array.toString()方法
Javascript String.sup()方法
Javascript String.charCodeAt()方法
Javascript Math.cos()方法
Javascript String.bold()方法
Javascript Math.tan()方法
Javascript RegExp.test()方法
Javascript Date.toDateString()方法
JavaScript錯(cuò)誤和異常處理
JavaScript函數(shù)
Javascript String.link()方法
JavaScript嵌套函數(shù)
Javascript Boolean對(duì)象
Javascript Array.shift()方法
Javascript String.small()方法
Javascript Date.getUTCMonth()方法
Javascript String.lastIndexOf()方法
Javascript Math.toSource()方法
Javascript Array.reduceRight()方法
JavaScript變量和數(shù)據(jù)類型
Javascript Number.NaN
Javascript Array.toSource()方法
Javascript頁(yè)面打印
Javascript Date.setUTCFullYear()方法
Javascript Array.indexOf()方法
Javascript RegExp.exec()方法
Javascript Date.setUTCSeconds()方法
Javascript String.match()方法
Javascript Date.setSeconds()方法
Javascript Array.sort()方法
Javascript Math.LOG2E,屬性
Javascript Math對(duì)象
Javascript Math.LN2屬性
Javascript String對(duì)象
JavaScript頁(yè)面重定向
Javascript RegExp.toSource()方法
Javascript Date.getUTCDate()方法
Javascript String.concat()方法
Javascript Array.map()方法
Javascript Date.toSource()方法
Javascript String.toLowerCase()方法
在HTML文件放置JavaScript
JavaScript for...in 循環(huán)
Javascript Object.prototype
Javascript RegExp.constructor屬性
JavaScript void關(guān)鍵詞
Javascript Date.getTimezoneOffset()方法
Javascript RegExp.multiline屬性
Javascript Date()函數(shù)
Javascript Date.setUTCHours()方法
JavaScript Array.forEach（）方法
在瀏覽器中啟用JavaScript
Javascript Date.setTime()方法
Javascript String.toLocaleUpperCase()方法
Javascript Date.setHours()方法
Javascript Date.constructor屬性
Javascript String.fixed()方法
Javascript Number對(duì)象
Javascript String.italics()方法
Javascript String.big()方法
Javascript String.fontcolor()方法
Javascript Date.getDay()方法
JavaScript IE4 DOM
Javascript Date.setMonth()方法
Javascript Date.setFullYear()方法
JavaScript函數(shù)字面值

JavaScript動(dòng)畫(huà)

你可以使用JavaScript來(lái)創(chuàng)建復(fù)雜的動(dòng)畫(huà)其中包括但不限于：

  • 煙火
  • 淡入淡出效果
  • 滾入或轉(zhuǎn)出
  • 入頁(yè)面或出頁(yè)面
  • 對(duì)象運(yùn)動(dòng)

本教程會(huì)給一個(gè)基本的了解如何使用JavaScript來(lái)創(chuàng)建一個(gè)動(dòng)畫(huà)。

JavaScript可以按照某種模式，由一個(gè)邏輯等式或函數(shù)來(lái)確定移動(dòng)至若干DOM元素(<IMG/>，<DIV>或任何其他HTML元素)頁(yè)面各處。

JavaScript提供以下要經(jīng)常用于動(dòng)畫(huà)程序兩種功能。

  • setTimeout( function, duration) - 從現(xiàn)在這個(gè)函數(shù)調(diào)用 duration 毫秒后的 function

  • setInterval(function, duration) - 每次持續(xù)duration 毫秒之后，此函數(shù)調(diào)用function。

  • clearTimeout(setTimeout_variable) - 這個(gè)函數(shù)調(diào)用清除任何計(jì)時(shí)器由setTimeout()函數(shù)設(shè)置。

JavaScript還可以設(shè)置一個(gè)數(shù)字，包括它在屏幕上的位置DOM對(duì)象的屬性?？梢栽O(shè)置一個(gè)對(duì)象的頂部和左側(cè)的屬性在屏幕上的任何位置。下面是簡(jiǎn)單的語(yǔ)法：

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動(dòng)動(dòng)畫(huà)：

所以，讓我們使用DOM對(duì)象的屬性和JavaScript函數(shù)如下的實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)：

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>

下面是上面的例子的說(shuō)明：

  • 我們使用的是JavaScript函數(shù)的getElementById()來(lái)獲取一個(gè)DOM對(duì)象，然后將其分配給一個(gè)全局變量 imgObj.

  • 我們定義了一個(gè)初始化函數(shù)的init()來(lái)初始化imgObj，我們已經(jīng)設(shè)置它的位置和左屬性。

  • 我們調(diào)用初始化函數(shù)在窗口加載時(shí)。

  • 最后，我們調(diào)用并將MoveRight()函數(shù)由10個(gè)像素來(lái)增加左邊的距離。你也可以將其設(shè)置為一個(gè)負(fù)數(shù)值，以將其移動(dòng)到左側(cè)。

自動(dòng)動(dòng)畫(huà)：

在上面的例子中，如我們所看到的，如何將圖像移動(dòng)到右每點(diǎn)擊?？梢酝ㄟ^(guò)使用JavaScript函數(shù)的setTimeout()如下自動(dòng)完成這一過(guò)程：

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

在這里，我們?cè)黾痈嗟那槿ぁＲ虼?，讓我們看看新的功能?/p>

  • 并將 MoveRight()函數(shù)調(diào)用 setTimeout()函數(shù)來(lái)設(shè)置 imgObj 位置。

  • 我們?cè)黾恿艘粋€(gè)新的函數(shù)stop()來(lái)清除由定時(shí)器設(shè)定的setTimeout()函數(shù)來(lái)設(shè)置對(duì)象在其初始位置。

翻轉(zhuǎn)用鼠標(biāo)事件：

下面是一個(gè)簡(jiǎn)單的例子，顯示圖像翻轉(zhuǎn)用鼠標(biāo)事件：

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
    var image1 = new Image();      // Preload an image
    image1.src = "/images/html.gif";
    var image2 = new Image();      // Preload second image
    image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>

讓我們來(lái)看看有什么不同的位置：

  • 在加載這個(gè)頁(yè)面，if語(yǔ)句檢查圖像對(duì)象存在的時(shí)間。如果圖像對(duì)象是不可用的，該塊將不被執(zhí)行

  • Image()構(gòu)造函數(shù)創(chuàng)建并預(yù)裝名為image1的一個(gè)新的圖像對(duì)象

  • src屬性指定的外部圖像文件的名稱叫 /images/html.gif

  • 我們已經(jīng)創(chuàng)建IMAGE2對(duì)象，并在這個(gè)對(duì)象分配/images/http.gif類似的方式

  • 在＃（井號(hào)）禁用鏈接，瀏覽器不會(huì)嘗試去一個(gè)URL點(diǎn)擊時(shí)。此鏈接的圖像

  • 當(dāng)用戶的鼠標(biāo)移動(dòng)到鏈路，而onmouseout事件處理程序，當(dāng)用戶的鼠標(biāo)移動(dòng)遠(yuǎn)離鏈路（圖像）被觸發(fā)onMouseOver事件處理程序被觸發(fā)

  • 當(dāng)鼠標(biāo)移動(dòng)時(shí)在圖像上，從第一圖像到第二個(gè)在HTTP圖像的變化。當(dāng)鼠標(biāo)被從圖像移離，則顯示原來(lái)的圖象

  • 當(dāng)鼠標(biāo)離開(kāi)該鏈接時(shí)，初始圖像html.gif將重新出現(xiàn)在屏幕上