JS實現自動生成li,產生每10個換行,顏色變換,正V,倒V效果圖


Q:幾個星期前,在學習這部分內容的時候,還一直很迷惑,現在就給具體說一下這個效果的實現過程

A:首先,請看效果圖 Demo

需要注意的是,這種效果是用absolute屬性,而不是float屬性,從這個Demo中又一次認識到absolute屬性的強大。貌似需要注意的只有這一點。

Q:JS填寫含背景圖片效果的代碼,總是出現錯誤?

A:代碼塊

        window.onload = function(){
            var oPanel = document.getElementsByClassName('container');
            for(var i=0;i<64;i++){
                oPanel[0].innerHTML += "<div style='width:50px;height:50px;position:absolute;top:" + parseInt(i/8)*51 + "px;left:"+ 51*(i%8) + "px;background:url(images/01.jpg)"+ " no-repeat " + -51*(i%8) + "px " + -51*parseInt(i/8) + "px;opacity:0;filter:alpha(opacity:0)'" + "></div>";
            }
            var oDiv = oPanel[0].getElementsByTagName('div');
            for(var i=0;i<oDiv.length;i++){
                oDiv[i].onmouseover = function(){
                this.style.opacity = 1;
                this.style.filter = 'alpha(opacity:' + 100 + ')';
                }
            }
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM