首頁 > 開發者 > JavaScript
隨著課程的進行，能跟著下來的人是越來越少了，不知道是不是因為沒有太多的表現，只是死記的東西，大家都沒有興趣啊。其實網頁上
的很多特效，動作大都是用javascript來實現的，沒有javascript的網頁，就象一個人沒有了肌肉一樣。但是所有的動作都是有函數來控制的
，而控制語句是基礎中的基礎。希望大家能耐心的學下去。今天的課程就輕鬆一下，學習點能見到效果的。
主要內容就是基於滑鼠的事件,有如下幾種：
1.mouseover（滑鼠移至）
2.mouseout（滑鼠移出）
3.mousemove（滑鼠移動）
4.mousedown（滑鼠按下）
5.mouseup（滑鼠彈起）
6.click（單擊）
7.dblclick（雙擊）
通常1和2組合起來使用，當使用者把滑鼠移動到一個超連結或者其他元素時，mouseover事件就會發生，mouseout總會伴隨著它，因為當滑鼠
離開時，mouseout事件就會發生。
例子：
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字型樣式有什麼變化</p>
</body>
</html>
這裡定義了兩個函數，來使字型改變樣式。關於函數我們以後會詳細的講解。
（注意：ie對頁面上的所有元素都支援mouseover和mouseout事件，但對於netscape navigator來說，只有超連結和層支援這兩個事件。）
下面看滑鼠移動的例子：
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}
function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}
function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
滑鼠移動的事件在滑鼠跟隨效果的使用上比較多，大家可以看看滑鼠跟隨特效。網上n多。
（需要注意的是：啟動這個事件處理過程存在一個問題，就是它有可能會屏蔽其他事件。另外還增加了頁面的處理時間，應盡量少用。）
先說到這兒吧，下節講滑鼠的另外4個事件。
今天的作業是：
1.圖片連結的轉換（當滑鼠放上去時是一個圖片，當滑鼠離開時是另外一個圖片）
2.圖片跟隨滑鼠（當滑鼠移動時，會有個圖片跟隨著滑鼠一起移動）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
