DOMѧϰ֮ͼƬ¿âÇл»Ð§¹û

2018-07-23 06:15:55À´Ô´£º²©¿ÍÔ° ÔĶÁ ()

ÐÂÀÏ¿Í»§´ó»ØÀ¡,ÔÆ·þÎñÆ÷µÍÖÁ5ÕÛ

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
Ìرð×¢Ò⣺±¾Õ¾ËùÓÐתÔØÎÄÕÂÑÔÂÛ²»´ú±í±¾Õ¾¹Ûµã£¬±¾Õ¾ËùÌṩµÄÉãÓ°ÕÕƬ£¬²å»­£¬Éè¼Æ×÷Æ·£¬ÈçÐèʹÓã¬ÇëÓëÔ­×÷ÕßÁªÏµ£¬°æȨ¹éÔ­×÷ÕßËùÓÐ

ÉÏһƪ£ºJavaScript ×Ö·û´® &amp; Math &amp; Date

ÏÂһƪ£ºVue+axiosͳһ½Ó¿Ú¹ÜÀí