DOMѧϰ֮ͼƬ¿âÇл»Ð§¹û
2018-07-24 08:23:55À´Ô´£º²©¿ÍÔ° ÔĶÁ ()
addloadevent(prepareplaceholder()) addloadevent(prepareGallery()) //Ò³Ãæ¼ÓÔØÍêʱִÐк¯Êý function addloadevent(func) { //²ÎÊý·ÅÈëÄã½çÃæ¼ÓÔØÍêÒªÖ´Ðеĺ¯Êý var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { oldonload(); func(); } } // Ïòºó²åÈëÔªËØ·½·¨ function insertAfter(ent,hou) { //µÚÒ»¸ö²ÎÊýÄãÒª³öÈëµÄ½Úµã£¬µÚ¶þ²ÎÊýÄãÒª²åÈë˵ĺóÃæ var parer = hou.parentNode; //»ñÈ¡ËûµÄ¸¸¼¶ÅжÏËùÑ¡µÄÔªËØÊÇ·ñÊÇ×îºóÒ»¸ö if (parer.lastChild == hou) { parer.appendChild(ent); //Èç¹ûÊÇ×îºóÒ»¸öÖ±½ÓÖ´ÐÐappendChild²åÈëµ½ºóÃæ } else { parer.insertBefore(ent, hou.nextSibling); //Èç¹û²»ÊÇÔò²åÈëµ½¸¸¼¶µÄͬ¼¶µÄÇ°Ãæ } } //²åÈëimg ºÍ p½ÚµãÉèÖÃÊôÐÔ function prepareplaceholder() { if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; //´´½¨Ò»¸öimg±êÇ©ÉèÖÃÊôÐÔ var placeholder = document.createElement("img"); placeholder.setAttribute("id", "placeholder"); placeholder.setAttribute("src", "img/200u0l000000d8n8xB0E3_R_550_412.jpg"); placeholder.setAttribute("alt", "µÚÒ»ÕÅͼƬ"); //´´½¨Ò»¸öp±êÇ©¸øËûÉèÖÃÊôÐÔ var description = document.createElement("p"); description.setAttribute("id", "description"); var desctext = document.createTextNode("µÚÒ»ÕÅͼƬ"); description.appendChild(desctext); // ½«´´½¨ºÃµÄ±êÇ©²åÈëHTMLÎĵµÖÐ var gallery = document.getElementById("imagegallery"); insertAfter(placeholder, gallery); insertAfter(description, placeholder); } //¸øa±êÇ©°ó¶¨µã»÷ʼþ function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var galley = document.getElementById("imagegallery"); var links = galley.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { links[i].onclick = function() { return showPic(this); } links[i].onkeypress = links[i].onclick; } } //µã»÷ºóÖ´Ðеĺ¯Êý function showPic(whichpic) { if (!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); if (!document.getElementById("placeholder")) return false; if (whichpic.getAttribute("title")) { var text = whichpic.getAttribute("title"); } else { text = ""; } var description = document.getElementById("description"); //ÅжÏP±êÇ©ÖеĽڵãÀàÐÍ 3ΪÎı¾ÀàÐÍ#text ÉèÖÃÎı¾ if (description.firstChild.nodeType == 3) { description.firstChild.nodeValue = text; } return false; }
HTML´úÂë
<!DOCTYPE html> <html> <head> <title>ͼƬ¿âЧ¹û</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h1>µã»÷ͼƬЧ¹û</h1> <ul id="imagegallery"> <li> <a href="img/200u0l000000d8n8xB0E3_R_550_412.jpg" title="µÚÒ»ÕÅͼ"> <img src="img/200u0l000000d8n8xB0E3_R_550_412.jpg" alt="fffd"> </a> </li> <li> <a href="img/20080o000000f95k889B2_R_550_412.jpg" title="µÚ¶þÕÅͼ"> <img src="img/20080o000000f95k889B2_R_550_412.jpg" alt="bbf"> </a> </li> <li> <a href="img/200h0d0000006tsrr8195_R_550_412.jpg" title="µÚÈýÕÅͼ"> <img src="img/200h0d0000006tsrr8195_R_550_412.jpg" alt="fff "> </a> </li> <li> <a href="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" title="µÚËÄÕÅͼ"> <img src="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" alt="fff "> </a> </li> </ul> <script type="text/javascript" src="js/script.js"></script> </body> </html>
CSS´úÂë
h1{ width: 290px; margin: 0 auto; height: 60px; line-height: 60px; text-align: center; color: #13af13; } #imagegallery{ width: 290px; height: 50px; margin: 0 auto; padding: 5px 0 0 0; background-color: #e2e2e2; } #imagegallery li{ float: left; width: 60px; list-style: none; margin-left: 10px; } #imagegallery img ,#imagegallery a{ text-decoration: none; font-style: normal; display: block; width: 100%; } #placeholder{ display: block; border: 4px solid #13af13; width: 282px; margin: 0 auto; } p{ text-align: center; }
±êÇ©£º
°æȨÉêÃ÷£º±¾Õ¾ÎÄÕ²¿·Ö×ÔÍøÂ磬ÈçÓÐÇÖȨ£¬ÇëÁªÏµ£ºwest999com@outlook.com
Ìرð×¢Ò⣺±¾Õ¾ËùÓÐתÔØÎÄÕÂÑÔÂÛ²»´ú±í±¾Õ¾¹Ûµã£¬±¾Õ¾ËùÌṩµÄÉãÓ°ÕÕƬ£¬²å»£¬Éè¼Æ×÷Æ·£¬ÈçÐèʹÓã¬ÇëÓëÔ×÷ÕßÁªÏµ£¬°æȨ¹éÔ×÷ÕßËùÓÐ
ÉÏһƪ£º·¢²¼Õ߶©ÔÄÕßģʽ
- Js²Ù×÷DOMÔªËؼ°»ñÈ¡ä¯ÀÀÆ÷¸ß¿íµÄ¼òµ¥·½·¨ 2019-12-31
- javascript IEÖеÄDOM readyÓ¦Óü¼ÇÉ 2019-11-17
- Document ¶ÔÏóµÄ³£Ó÷½·¨ 2019-08-29
- IE DOMʵÏÖ´æÔڵIJ¿·ÖÎÊÌâ¼°½â¾ö·½·¨ 2019-08-29
- Vueѧϰ֮ÏîÄ¿²¿·Ö´úÂë(Ê®°Ë£© 2019-08-14
IDC×ÊѶ£º Ö÷»ú×ÊѶ ×¢²á×ÊѶ ÍйÜ×ÊѶ vps×ÊѶ ÍøÕ¾½¨Éè
ÍøÕ¾ÔËÓª£º ½¨Õ¾¾Ñé ²ß»®Ó¯Àû ËÑË÷ÓÅ»¯ ÍøÕ¾Íƹã Ãâ·Ñ×ÊÔ´
ÍøÕ¾ÁªÃË£º ÁªÃËÐÂÎÅ ÁªÃ˽éÉÜ ÁªÃ˵ãÆÀ Íø׬¼¼ÇÉ
ÐÐÒµ×ÊѶ£º ËÑË÷ÒýÇæ ÍøÂçÓÎÏ· µç×ÓÉÌÎñ ¹ã¸æ´«Ã½
ÍøÂç±à³Ì£º Asp.Net±à³Ì Asp±à³Ì Php±à³Ì Xml±à³Ì Access Mssql Mysql ÆäËü
·þÎñÆ÷¼¼Êõ£º Web·þÎñÆ÷ Ftp·þÎñÆ÷ Mail·þÎñÆ÷ Dns·þÎñÆ÷ °²È«·À»¤
Èí¼þ¼¼ÇÉ£º ÆäËüÈí¼þ Word Excel Powerpoint Ghost Vista QQ¿Õ¼ä QQ FlashGet ѸÀ×
ÍøÒ³ÖÆ×÷£º FrontPages Dreamweaver Javascript css photoshop fireworks Flash
³ÌÐòÉè¼Æ£º Java¼¼Êõ C/C++ VB delphi
- Photoshop»æÖÆÁ¢Ìå·ç¸ñµÄ΢Ц±íÇé
- PSÎÄ×ÖÌØЧ½Ì³Ì£ºÖÆ×÷¹«Â·ÉϸöÐÔµÄÍ¿Ñ»
- PhotoshopÉè¼Æ¾í±ßЧ¹ûµÄ±äÐνð¸ÕµçÓ°
- PSÉ«²ÊÐÞ¸´½Ì³Ì£ºÀûÓÃÉ«½×¹¤¾ß¿ìËÙ¸øºì
- PS°ë͸Ã÷ÎïÌå¿Ùͼ£ºÀûÓÃͨµÀÑ¡Çø¹¤¾ß¿Ù
- PSº£±¨Éè¼Æ¼¼Çɽ̳̣ºÑ§Ï°ÖÆ×÷¸öÐԵč
- PSͼƬÌØЧÖÆ×÷½Ì³Ì£ºÑ§Ï°¸øÌúËþͼƬÖÆ
- ѧϰÓÃphotoshop°Ñ»ë×ǵĺ£Ë®ÕÕƬºóÆÚ
- PS¹Å·çÕÕƬ½Ì³Ì£º¸ø¹Å·çÃÀÅ®´òÔì³öÅ®ÏÀ
- PS¸öÐÔÈËÎﺣ±¨ÖÆ×÷£ºÉè¼Æ´´ÒâʱÉеIJ£
- ÓÃjavascriptʵÏÖBase64±àÂë
- ¡¾ÔËÐдíÎó¡¿Uncaught DOMException: B
- socket.io ³öÏÖµÄWebSocket is closed
- charles×¥°ü³öÏÖÂÒÂë SSL Proxying no
- ES6 require ( ·¾¶±äÁ¿ ) Ïà¹ØʹÓ÷½
- echartsÔÚµØͼÉÏ»æÖÆÉ¢µãͼ£¨ÈÎÒâµã£©
- NuxtÏîÄ¿´î½¨µ½·¢²¼²¿Êð
- Ê¡ÊÐÇøÈý¼¶Áª¶¯ÏÂÀÁÐ±í£¬»ñÈ¡µØÇø±àºÅ
- ×îÈ«Ç°¶Ë×ÊÔ´»ã×Ü
- layui table±í¸ñ ±íÍ·ÓëÄÚÈÝÁдíλÎÊ