這篇文章主要介紹了JS使用oumousemove和oumouseout動態改變圖片顯示的方法,涉及javascript鼠標事件及圖片操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS使用oumousemove和oumouseout動態改變圖片顯示的方法。分享給大家供大家參考。具體如下：
鼠標放到圖片上時圖片會自動變大，鼠標離開圖片還原
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function bigImg(x)
- {
- x.style.height="64px";
- x.style.width="64px";
- }
- function normalImg(x)
- {
- x.style.height="32px";
- x.style.width="32px";
- }
- </script>
- </head>
- <body>
- <img onmouseover="bigImg(this)" onmouseout="normalImg(this)"
- border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
- <p>The function bigImg() is triggered when the user moves
- the mouse pointer over the image.</p>
- <p>The function normalImg() is triggered when the mouse
- pointer is moved out of the image.</p>
- </body>
- </html>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
