JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法
更新時(shí)間：2015年02月28日 10:47:45 投稿：shichen2014
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法。分享給大家供大家參考。具體如下：
這是一個(gè)完全的鼠標(biāo)箭頭美化效果的JS代碼，通過(guò)這個(gè)JS代碼，把鼠標(biāo)的箭頭加上一個(gè)樣式，燃燒中的蠟燭。這個(gè)也是很古老的代碼了，只能在IE8及以下瀏覽器運(yùn)行，代碼如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很有特色的熒光鼠標(biāo)</title>
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<div id="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<div align="right">
<img src="images/light.gif" width="29" height="30">
</div>
</dd>
</div>
<table border="0" width="100%">
<tr>
<td width="82%"><font face="宋體" color="#FF00FF" style="font-size: 9pt">
</font><span style="font-size: 9pt">
摘要:HTML5源碼,Canvas實(shí)例,Canvas動(dòng)畫(huà)
一個(gè)HTML5_Canvas練手程序，用Canvas標(biāo)簽<br><br><br>繪制簡(jiǎn)單的動(dòng)畫(huà)效果：模擬十字路口綠燈亮，<br><br>車走；紅燈亮，車停效果，動(dòng)畫(huà)效果比較粗糙，<br>供入門(mén)者參考。HTML5程序，目前暫不支持IE。
<br> 射擊游戲,開(kāi)始游戲后，<br>用鼠標(biāo)點(diǎn)擊下落的物體，<br>可射擊爆炸物體，生成的游戲畫(huà)質(zhì)精細(xì)，<br>動(dòng)畫(huà)流暢，測(cè)試時(shí)請(qǐng)使用火狐或Chrome瀏覽器，<br>IE8以下版本不能運(yùn)行本游戲。<br>雖然游戲功能不算強(qiáng)大，<br><br>但卻用到了HTML5中基礎(chǔ)的技巧，<br><br><br>另外，一些游戲操作的JS類也是想當(dāng)不錯(cuò)的選擇。<br><br>
基于html5離線存儲(chǔ)實(shí)例，當(dāng)加載頁(yè)面時(shí)，應(yīng)用程序利用一個(gè) onLoad 函數(shù)來(lái)核查相<br><br>應(yīng)的數(shù)據(jù)是否已經(jīng)位于本地高速緩存區(qū)中并且將添加一個(gè)<br><br>歡迎窗口，添加一個(gè)事件偵聽(tīng)程序以<br><br>及偵聽(tīng)一個(gè)storage 事件，<br><br>應(yīng)用程序能夠?qū)ocalStorage變更進(jìn)行響應(yīng)，<br><br>核查瀏覽器支持localStorage功能，<br><br>設(shè)置數(shù)據(jù)到緩存，清除數(shù)據(jù)等功能。
</span></td>
</tr>
</table>
<script language="vbscript">
dim red,gre,blu
dim x,y,z
red=255
gre=255
blu=0
z=100
sub window_onload()
call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)
mybody.style.cursor="hand"
end sub
sub document_onmousemove()
x=window.event.x
y=window.event.y
call mybody.filters.Light.MoveLight(0, x, y, 100, 1)
end sub
</script>
<script language="javascript">
//這是使圖層移動(dòng)的函數(shù)
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft-50;
Layer1.style.top=event.clientY+document.body.scrollTop-20;
}
//這里的意思是，如果鼠標(biāo)移動(dòng)時(shí)就調(diào)用"move_layer"函數(shù)
document.onmousemove =move_layer;
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很有特色的熒光鼠標(biāo)</title>
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<div id="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<div align="right">
<img src="images/light.gif" width="29" height="30">
</div>
</dd>
</div>
<table border="0" width="100%">
<tr>
<td width="82%"><font face="宋體" color="#FF00FF" style="font-size: 9pt">
</font><span style="font-size: 9pt">
摘要:HTML5源碼,Canvas實(shí)例,Canvas動(dòng)畫(huà)
一個(gè)HTML5_Canvas練手程序，用Canvas標(biāo)簽<br><br><br>繪制簡(jiǎn)單的動(dòng)畫(huà)效果：模擬十字路口綠燈亮，<br><br>車走；紅燈亮，車停效果，動(dòng)畫(huà)效果比較粗糙，<br>供入門(mén)者參考。HTML5程序，目前暫不支持IE。
<br> 射擊游戲,開(kāi)始游戲后，<br>用鼠標(biāo)點(diǎn)擊下落的物體，<br>可射擊爆炸物體，生成的游戲畫(huà)質(zhì)精細(xì)，<br>動(dòng)畫(huà)流暢，測(cè)試時(shí)請(qǐng)使用火狐或Chrome瀏覽器，<br>IE8以下版本不能運(yùn)行本游戲。<br>雖然游戲功能不算強(qiáng)大，<br><br>但卻用到了HTML5中基礎(chǔ)的技巧，<br><br><br>另外，一些游戲操作的JS類也是想當(dāng)不錯(cuò)的選擇。<br><br>
基于html5離線存儲(chǔ)實(shí)例，當(dāng)加載頁(yè)面時(shí)，應(yīng)用程序利用一個(gè) onLoad 函數(shù)來(lái)核查相<br><br>應(yīng)的數(shù)據(jù)是否已經(jīng)位于本地高速緩存區(qū)中并且將添加一個(gè)<br><br>歡迎窗口，添加一個(gè)事件偵聽(tīng)程序以<br><br>及偵聽(tīng)一個(gè)storage 事件，<br><br>應(yīng)用程序能夠?qū)ocalStorage變更進(jìn)行響應(yīng)，<br><br>核查瀏覽器支持localStorage功能，<br><br>設(shè)置數(shù)據(jù)到緩存，清除數(shù)據(jù)等功能。
</span></td>
</tr>
</table>
<script language="vbscript">
dim red,gre,blu
dim x,y,z
red=255
gre=255
blu=0
z=100
sub window_onload()
call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)
mybody.style.cursor="hand"
end sub
sub document_onmousemove()
x=window.event.x
y=window.event.y
call mybody.filters.Light.MoveLight(0, x, y, 100, 1)
end sub
</script>
<script language="javascript">
//這是使圖層移動(dòng)的函數(shù)
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft-50;
Layer1.style.top=event.clientY+document.body.scrollTop-20;
}
//這里的意思是，如果鼠標(biāo)移動(dòng)時(shí)就調(diào)用"move_layer"函數(shù)
document.onmousemove =move_layer;
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
- js超漂亮的鼠標(biāo)提示，帶人性化缺口
- js實(shí)現(xiàn)完全自定義可帶多級(jí)目錄的網(wǎng)頁(yè)鼠標(biāo)右鍵菜單方法
- js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
- js根據(jù)鼠標(biāo)移動(dòng)速度背景圖片自動(dòng)旋轉(zhuǎn)的方法
- JS網(wǎng)頁(yè)在線獲取鼠標(biāo)坐標(biāo)值的方法
- js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法
- js實(shí)現(xiàn)鼠標(biāo)感應(yīng)圖片展示的方法
- js實(shí)現(xiàn)動(dòng)畫(huà)特效的文字鏈接鼠標(biāo)懸停提示的方法
相關(guān)文章
javascript實(shí)現(xiàn)的LI列表輸出，隔行同色的代碼
javascript實(shí)現(xiàn)的LI列表輸出，隔行同色的代碼...2007-10-10
這篇文章主要為大家介紹了JS如何處理可視區(qū)域圖片懶加載技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了詳解Javascript繼承的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript Array.remove() 數(shù)組刪除
下面的代碼主要是實(shí)現(xiàn)了，刪除數(shù)組中指定的值。2009-08-08
js函數(shù)獲取html中className所在的內(nèi)容并去除標(biāo)簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容，具體實(shí)現(xiàn)思路如下，喜歡的朋友可以參考下2013-09-09
基于jquery實(shí)現(xiàn)全屏滾動(dòng)效果
相信大家都很喜歡網(wǎng)易郵箱、QQ瀏覽器的官方網(wǎng)站這樣的可全屏滾動(dòng)的效果，也許更多的朋友想把全屏滾動(dòng)效果做到自己的網(wǎng)站中，本文就帶著大家一起完成這個(gè)效果2015-11-11
JS打印gridview實(shí)現(xiàn)原理及代碼
打印gridview對(duì)于一些童鞋們真的是很陌生啊,不過(guò)沒(méi)有關(guān)系，因?yàn)楸疚牡某霈F(xiàn)，或讓你茅塞頓開(kāi)，好了話不多說(shuō)，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)js高級(jí)知識(shí)有所幫助2013-02-02
這篇文章主要介紹了JavaScript模塊模式,結(jié)合實(shí)例形式詳細(xì)分析了js模塊模式的相關(guān)概念、功能、擴(kuò)展等操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12