html鼠標(biāo)放在圖片上(html鼠標(biāo)放在圖片上圖片變大)
1首先輸入lt!DOCTYPE html lthtml lthead ltmeta charset=quotutf8quot lttitle鼠標(biāo)懸停圖片上顯示文字 在線演示 title ltstyle imgborder0* css 注釋說明設(shè)置圖片邊框?yàn)? * body。
html鼠標(biāo)放上逐漸變大拿走變小原理如下1當(dāng)鼠標(biāo)移到圖片上,圖片變大當(dāng)鼠標(biāo)移出圖片,圖片變小2鼠標(biāo)over時(shí),設(shè)置一個(gè)定時(shí)器,讓圖片逐漸變大,鼠標(biāo)out時(shí)同理。
分別寫一個(gè)onmouseover和onmouseout事件然后在事件里面加一個(gè)function,分別寫想要放大的尺寸和縮小或復(fù)原的尺寸具體代碼實(shí)現(xiàn)如下ltimg id=quotimgquot onmouseover=quotbiggerquot onmouseout=quotsmallerquot src=quot你的圖片路徑quot style。
這樣ltAhref=quotquotltimgsrc=quotimagesyumenjpgquotonmouseover=quotthissrc=#39imagesyumen1jpg#39quotonmouseout=quotthissrc=#39imagesyumenjpg#39quotwidth=quot100quotheight=quot28quotltA設(shè)置一個(gè)div,但是默認(rèn)卻。
六將右側(cè)“全圖看圖命令”的勾選取消七如圖所示,取消后該設(shè)置會(huì)自動(dòng)保存在瀏覽器的設(shè)置中老的瀏覽器版本則是在高級(jí)設(shè)置中改動(dòng)八設(shè)置完成后,回到有圖案的網(wǎng)頁這次將鼠標(biāo)放在圖片上,不會(huì)出現(xiàn)惱人的對(duì)話。
鼠標(biāo)的移入移出事件,可以參考下手冊(cè),思路就是 1, 你給每個(gè)圖片都有一個(gè)特殊的id標(biāo)示,然后隱藏的div就是文字顯示的id可以為quotimg_quot+圖片的id 2 移入時(shí) 隱藏id圖片 顯示quotimg_quot+圖片的id的div文字 3移出時(shí) 就。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。