Javascript腳本特效示例:字符圍繞鼠標
Javascript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的基于對象的動態(tài)類型的區(qū)分大小寫的客戶端腳本語言,主要目的是為了解決服務(wù)器端語言,比如Perl,遺留的速度問題,為
Javascript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的基于對象的動態(tài)類型的區(qū)分大小寫的客戶端腳本語言,主要目的是為了解決服務(wù)器端語言,比如Perl,遺留的速度問題,為客戶提供更流暢的瀏覽效果。當時服務(wù)端需要對數(shù)據(jù)進行驗證,由于網(wǎng)絡(luò)速度相當緩慢,只有28.8kbps,驗證步驟浪費的時間太多。于是Netscape的瀏覽器Navigator加入了Javascript,提供了數(shù)據(jù)驗證的基本功能。
創(chuàng)建HTML文件
首先,在桌機上新建文本文檔,命名為曉博JavaScript特效測試.txt,并將以下代碼粘貼到文檔中:
lt;htmlgt; lt;headgt; lt;titlegt;曉博JavaScript特效測試lt;/titlegt; lt;/headgt; lt;bodygt; lt;div id"zy"gt; lt;div id"login"gt;lt;/divgt; lt;div id"daohang"gt; lt;ulgt; lt;ligt;lt;a href""gt;首頁lt;/agt;lt;/ligt; lt;ligt;lt;a href""gt;七夕簡介lt;/agt;lt;/ligt; lt;ligt;lt;a href"""gt;七夕節(jié)傳說lt;/agt;lt;/ligt; lt;ligt;lt;a href"""gt;七夕節(jié)習(xí)俗lt;/agt;lt;/ligt; lt;ligt;lt;a href"""gt;詩詞amp;歌謠lt;/agt;lt;/ligt; lt;ligt;lt;a href"""gt;七夕節(jié)寄語lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;
然后將文本文檔保存為HTML文件。
添加Javascript代碼
在頭部區(qū)域中添加以下Javascript代碼,并將文檔重命名為HTML文件:
lt;script language"javascript"gt; var cx 0; var cy 0; var val 0; function locate() { cx window.event.x; cy window.event.y; } document.onmousemove locate; function follow(i) { var x; if (i lt; 4) x cx - 50 i * 10; else x cx - 25 i * 10; var y cy - 20 Math.floor(Math.random() * 40); var w eval("word" i); with () { left () "px"; top () "px"; } } function show(i) { var w eval("word" i); with () { visibility "visible"; s parseInt(fontSize); if (s > 200) s - 100; else if (s lt; 90 amp;amp; s gt; 100) { s - 85; clearInterval(val); if (i lt; 5) val setInterval("show(" (i 1) ")", 20); } fontSize s; } } function start() { for (i 1; i lt; 5; i ) { val setInterval("show(1)", 20); setInterval("follow(" i ")", 100); } } lt;/scriptgt;
這段Javascript代碼實現(xiàn)了字符圍繞鼠標的特效效果。
查看效果
用IE瀏覽器打開曉博JavaScript特效測試.html文件,你就可以看到字符圍繞鼠標的特效效果。