JS動態圖片的實現方法完整示例
阿新 • • 發佈:2020-01-14
本文例項講述了JS動態圖片的實現方法。分享給大家供大家參考,具體如下:
<html> <head> <meta charset="UTF-8"> <title>js-是動態實現圖片顯示</title> <script type="text/javascript"> // 設定圖片的動態效果 function photoOper(ph,photo){ // 獲取圖片物件 // var ph=document.getElementById(id); //可以通過id獲得,但是沒必要,我們可以直接使用this直接把物件傳過來 ph.style.border="solid 1px"; //我們是重新賦值,所以我們要用=賦值符,而不是:各個是屬性說明 // 在大屏塊顯示 big.src=photo; //傳過來的資料就已經是一個字串型別了,雖然我們src的值需要是字串,但是如果再加一個""就會導致路徑不明,這樣其實際圖片名相當於帶了"" } //src是big的屬性的是不是樣式屬性,可以直接呼叫修改,不用加style function photoOper2(ph){ ph.style.border=""; //移出後邊框值沒 } </script> <style type="text/css"> #showdiv{ width: 500px; height: 440px; border: solid 1px; border-radius: 15px; } #ta{ margin: auto; margin-top: 10px; margin-left: 10x; } img{ margin-left: 3px; } </style> </head> <body> <div id="showdiv"> <table id="ta"> <tr> <td colspan="4" width="490px" height="344px"><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" width="490px" id="big"/></td> </tr> <tr> <td height="68px"><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" height="65px" id="p1" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg')" onmouseout="photoOper2(this)"/></td> <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg')" onmouseout="photoOper2(this)" /></td> <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg')" onmouseout="photoOper2(this)"/></td> <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg')" onmouseout="photoOper2(this)"/></td> </tr> </table> </div> </body> </html>
執行效果:
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧彙總》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。