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