91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

如果你完全不懂，那么期望1-2周看完一遍拉倒....不用看的太仔細(xì)，后面再看到不懂的時(shí)候回頭去看這些東西好了 [B]1. 前言和準(zhǔn)備工作[/B] 這里不會(huì)介紹什么軟件的用法一類的東西。如果覺得手寫代碼是在裝的人可以出去了，謝謝。 首先你要有臺(tái)電腦。然后它應(yīng)該裝著windows 和 IE。下面所談到的代碼都僅在IE6.0下調(diào)試通過，但是我會(huì)盡量用標(biāo)準(zhǔn)的寫法。這里先不仔細(xì)介紹兼容性問題了，那是另一個(gè)教程的事情。我習(xí)慣用記事本或者UltraEdit來編輯，實(shí)際上任何文本編輯器都可以，只要你喜歡。具體怎么用這些工具就不說了，俺們加快速度。 [B]2. 第一個(gè)例子[/B] 做什么好呢？俺們從最簡(jiǎn)單的開始吧....給自己一個(gè)作個(gè)特效玩玩？...讓俺想想....做一個(gè)可以扔的方塊怎么樣？開始做了... [B]2.1 方塊[/B] [code][/code] 不要說俺在敷衍啊，萬事都有個(gè)非常簡(jiǎn)單的開始，就像俺被俺前mm踹掉一樣... ps： 細(xì)心的朋友也許會(huì)發(fā)現(xiàn)俺的 cursor 用的是 pointer 而不是 hand，這是因?yàn)閔and 屬性不符合標(biāo)準(zhǔn)。雖然俺只為IE寫代碼，但是保持好的習(xí)慣是必要的。以后此類問題一律用 “(兼)”標(biāo)記。 [B]2.2 可以拖動(dòng)的方塊 2.21 綁定鼠標(biāo)事件：按下，拖動(dòng)，釋放；獲取事件信息：位置，發(fā)生的元素[/B] [code] [/code] 對(duì)于菜鳥來說，這段代碼其實(shí)包含了很多的內(nèi)容。 ⑴ 變量的命名 這是個(gè)非常重要的東西，我不得不把這段話編號(hào)為 2.210 就是為了提醒剛?cè)腴T的菜鳥 － 用一個(gè)自己能明白的名字去命名你的變量。如果你要以此為生，最好也要讓你的變量名能被別人看懂。 ⑵ 綁定事件 － 回字的四種寫法 a) 直接在HTML元素標(biāo)記中寫入： onmousedown="divBlock_event_mousedown();" b) 將事件函數(shù)的句柄賦值給相應(yīng)的事件：document.onmousemove=document_event_mousemove; （注意賦值的函數(shù)名后面并沒有括號(hào)） c) 使用 attachEvent 方法（對(duì)于FF類的瀏覽器來說是 addEventListener） ps：解除事件的綁定也有相應(yīng)方式，就不羅嗦了 ⑶ 不要被那個(gè) I_do_not_care=... 什么的迷惑，那個(gè)是三元表達(dá)式，如果你有認(rèn)真學(xué)習(xí) JS語法的話。那樣寫的目的是兼容。 ⑷ 在函數(shù)體的最前面就聲明需要用到的變量是個(gè)好習(xí)慣，它可以避免你犯很多莫名其妙的錯(cuò)誤 － 比如遞歸的死循環(huán)之類的。當(dāng)然，如果你壓根不喜歡這個(gè)變量（就像俺那個(gè) I_do_not_care 一樣），那么就隨它去吧。 ⑸ e=window.event?window.event:e; 也是為了兼容。其實(shí)這句只是獲得 event 對(duì)象而已。用 e.clientX 而不用 e.x 也是兼容問題。obj.firstChild.nodeValue 而不是 obj.innerText 同理。而不是 也是同理。 － 兼容真是個(gè)tnnd 問題。 ⑹ 如果你發(fā)現(xiàn)自己還是有些糊涂，回去復(fù)習(xí) 0.1 和 0.2 節(jié)中提到的事件部分 [B]2.22 拖動(dòng)方塊[/B] [code] [/code] ⑴ 編程是件腦力活動(dòng)，呵呵。首先要先琢磨出來，拖動(dòng)意味著什么。其實(shí)拖動(dòng)就是判斷鼠標(biāo)位置，然后改變你需要拖動(dòng)的元素的坐標(biāo)而已。那么分成兩步：判斷鼠標(biāo)位置，改變?cè)氐淖鴺?biāo)。這個(gè)看起來也不難。前一點(diǎn) 2.21 剛討論過。后一點(diǎn)，如果你對(duì) JS 操作 CSS 有所了解的話也是輕而易舉（不明白的回頭去看0.3節(jié)）。 ⑵ 現(xiàn)在俺詳細(xì)描述下這個(gè)過程： a) 鼠標(biāo)按下時(shí)，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和元素坐標(biāo)的差存在元素的 startX 和 startY 兩個(gè)自定義的屬性里。綁定鼠標(biāo)移動(dòng)事件。 b) 鼠標(biāo)移動(dòng)時(shí)，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和 startX / startY 的差值作為新的元素坐標(biāo)。（你問我為啥這樣算？帥哥請(qǐng)回去重修高中數(shù)學(xué)，呵呵） c) 鼠標(biāo)按鍵抬起，清除鼠標(biāo)移動(dòng)事件的相應(yīng)。（不然你放開了鼠標(biāo)方塊還是跟著你跑） ⑶ 為啥用 document 的事件綁定而不是把事件綁定在 div上面？問的好（你不會(huì)沒想到這個(gè)問題吧？...）如果你試著將事件綁定在div上，你會(huì)發(fā)現(xiàn)隨著鼠標(biāo)的快速移動(dòng)，很容易把div給甩掉（不理解的同學(xué)請(qǐng)自己去動(dòng)動(dòng)手）。具體的為什么不多說了，點(diǎn)到即止，希望菜鳥多多思考。 ⑷ 不定義 position="absolute" 的話，left 和 top 是無效的 － 方塊不會(huì)動(dòng)的說 [B]2.3 可以移動(dòng)的方塊[/B] [B]2.31 物理模型和面向?qū)ο骩/B] [code] [/code] ⑴ 這個(gè)模型很簡(jiǎn)單： 物體的屬性：速度（包含 x 分量和 y 分量，這里設(shè)置為一個(gè)0-5的隨機(jī)數(shù)） 物體的方法：運(yùn)動(dòng) 環(huán)境屬性：運(yùn)動(dòng)阻尼 f, 和窗口邊緣碰撞彈性系數(shù) k, 重力加速度 g ⑵ 注意 obj.move 那個(gè)方法（函數(shù)）的寫法 [B]2.32 讓方塊動(dòng)起來[/B] [code] [/code] 代碼開始變難了啊，呵呵。請(qǐng)仔細(xì)閱讀注釋。 ⑴ 說到底只不過是個(gè)物理過程的算法表達(dá)而已。其中移動(dòng)的實(shí)現(xiàn)和前面 2.22 節(jié)的拖動(dòng)是類似的。 ⑵ 注意感覺這里代碼中 this 的使用。我在 Obj.move 中使用 this 的時(shí)候，this指的就是 Obj ⑶ 注意我把 Obj 放在了函數(shù)外面。這時(shí)候它就是一個(gè)全局變量。這是為了后面使用 setInterval 而準(zhǔn)備的。很多菜鳥在用定時(shí)器的時(shí)候常常發(fā)現(xiàn)“找不到對(duì)象”的錯(cuò)誤，請(qǐng)注意一下變量的定義域問題。 ⑷ 菜鳥注意學(xué)習(xí)內(nèi)置對(duì)象 Math 的方法 [B]2.33 讓方塊停下來[/B] [code] [/code] 在方塊上按下鼠標(biāo)，它會(huì)停下來，彈起鼠標(biāo)，它就繼續(xù)跑了，呵呵。 ⑴ 沒人注意到 2.211 綁定事件 － 回字的四種寫法只舉出了三種綁定事件的方法嗎？呵呵，這里是第四種： obj.onmousedown=function(){ this.stop(); } ⑵ 我把 setInterval 改成了 setTimeout, 并且將定時(shí)器的句柄保存在了 obj 的屬性里。這種使用定時(shí)器的做法是值得菜鳥借鑒的。 [B]2.4 大結(jié)局 － 可以拋出的方塊[/B] [code] [/code] 用鼠標(biāo)按住方塊，然后移動(dòng)鼠標(biāo)，同時(shí)松開鼠標(biāo)，看看效果吧，呵呵 這個(gè)例子算結(jié)束了，哈哈。不作講解了，各位自己看吧。