javascript新手實例2-CSS操作

jayce 發布于2019-08-21 17:03 / 737人閱讀

摘要：他背后的故事，令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了，在小程序面世伊始，有觀點認為它能夠取代手機，給用戶帶來更清爽的體驗。

周末快樂，今天給大家一個經常會用的例子，TAB切換，TAB的原理就是用js來控制不同層的display屬性，今天給大家這個也是同樣的原理，還是操作css的更多，用js把文章顯示區域的css對應切換，這樣就實現了不同的顯示效果。

還是那句話：“每天一例，輕松javascrip”

老規矩，先上圖：

html代碼



    
        
        圖片顯示模式切換★
        
        
    
    
        
            
                
                    大圖展示
                    小圖展示
                    列表展示
                
            
            
                
                    
                        
                            
                        
                        
                            微信小程序這些新增加功能你肯定喜歡
                            近日，微信公眾號發文稱，小程序新增錄音、拍照攝像、視頻播放等功能，大幅增加多媒體能力。同時小程序還進一步完善訪客來源信息，讓開發者有跡可循。                            
                        
                    
                    
                        
                            
                        
                        
                            工作累了就聽周杰倫的院士 讓中國高鐵領跑世界
                            “辦公室可以說是翟老師第二個家，就連大年二十九，學校空得寂若無人，外邊已經張燈結彩放鞭炮了，他也要在辦公室工作到晚上八九點才肯走。”                        
                        
                    
                    
                        
                            
                        
                        
                            暖心｜85歲“蝙蝠俠”爺爺深夜拾荒5年，背后的故事看哭網友
                            5年來，他靠著夜里撿垃圾，資助貧困兒童讀完大學。他背后的故事，令人動容！                        
                        
                    
                    
                        
                            
                        
                        
                            只是逗你玩？為何小程序目前難以取代App
                            微信小程序也已經推出了一段時間了，在小程序面世伊始，有觀點認為它能夠取代手機App，給用戶帶來更清爽的體驗。                        
                        
                    
                    
                        
                            
                        
                        
                            配置確認！華為Mate 10 Pro現身跑分：麒麟970低調首秀
                            規格方面，麒麟970采用10nm工藝，8核設計，4xA73 2.4GHz+4xA53 1.8GHz，GPU為首次商用Mali-G72（12核），全新升級的自研相機ISP，內建NPU（Neural Network Processing Unit，神經處理單元）。                        
                        
                    
                    
                        
                                                
                        
                        
                            為什么解放軍特種兵普遍不戴防彈頭盔，而選擇戴軍帽呢？
                            在一些電視報道或者新聞上面，我們都能夠或多或少的看到一些關于解放軍特種兵的消息和報道，但是，大家注意到了一個細節沒有，不管是訓練還是平時的時候，我們都會注意到解放軍的特種兵似乎也很少見到他們帶防彈頭盔，而是選擇戴普通的軍帽或者圓頂帽。

css代碼

body {
    background: #f7efef;
    font-size: 14px;
}
ul, ul li {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
}
.imgBox {
    width: 620px;
}


#menu, .contentBox, .contentBox li, .contentBoxBig, .contentBoxBig li, .contentBoxSmall, .contentBoxSmall li {
    width: 100%;
    float: left;
}
.contentBox, .contentBoxBig, .contentBoxSmall {
    border: 1px solid #f75a08;
    background: #fff;
    padding: 10px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 10px 10px 7px #999;
}
#menu li {
    width: 90px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    float: left;
    color: #333;
    border-radius: 10px 10px 0 0;
    margin-right: 10px;
    cursor: pointer;
    background: #fff;
    box-shadow: 5px 5px 7px #999;
    border:1px solid #f75a08;
    border-bottom: none;
}
#menu li.active, #menu li:hover {
    background: #f75a08;
    color: #fff;
}

.contentBox li, .contentBoxBig li, .contentBoxSmall li {
    margin: 5px 0;
}
.contentBoxSmall li {
    border-bottom: 1px dotted #f75a08;
    padding: 5px 0;
}

.contentBox li a, .contentBoxBig li a, .contentBoxSmall li a {
    color: #333;
    text-decoration: none;
}
.contentBox li:hover, .contentBoxBig li:hover, .contentBoxSmall li:hover {
    background: #f7efef;
}
.contentBox #img, .contentBox img, .contentBoxBig #img, .contentBoxBig img, .contentBoxSmall #img, .contentBoxSmall img {
    float: left;
    width: 120px;
    height: 75px;
    overflow: hidden;
    margin-right: 10px;
    border-radius: 5px;
}

.contentBoxBig #img, .contentBoxBig img{
    width: 258px;
    height: 158px;
}

.contentBoxSmall #img, .contentBoxSmall img{
    width: 20px;
    height: 20px;
}

.contentBox p, .contentBoxBig p, .contentBoxSmall p {
    font-size: 16px;
    margin: 10px 0;
    width: 480px;
    height: 25px;
    font-weight: bold;
    overflow: hidden;
    float: left;
}
.contentBoxBig p {
    width: 350px;
    font-size: 20px;
}
.contentBoxSmall p {
    width: 580px;
    font-size: 14px;
    margin: 0;
    font-weight: normal;
}

.contentBox span, .contentBoxBig span {
    font-size:#14px;
    color: #808080;
    width: 480px;
    height: 20px;
    overflow: hidden;
    float: left;
}
.contentBoxBig span {
    width: 350px;
    height: 90px;
}
.contentBoxSmall span {
    display: none;
}
.contentBox text, .contentBoxBig text, .contentBoxSmall text{
    float: left;;
}

js代碼

window.onload = function () {
    
    function luka(element) {
        //if (/#/.test(element) == true) 正則也可以匹配，不過正則的效率沒有函數高，貌似任何語言都是
        if (element.indexOf("#") > -1) {
            return document.getElementById(element.replace(/#/,""));
        };
        if (element.indexOf(".") > -1) {
            return document.getElementsByClassName(element.replace(/./g,""));
        };
        if (/^[a-zA-Z]+&/.element = true) {
            return document.getElementsByTagName(element);
        };
        console.log(element);
    };
    
    var getMenu = luka("#menu");
    var clickLi = getMenu.getElementsByTagName("li");
    console.log(clickLi);
    
    for(var i = 0; i<3; i++) {
        clickLi[i].index = i;
        luka("li")[i].onclick = function() {
            liNum = this.index;
              //alert(this.index);
            switch(liNum) {
                case 0:
                    luka("li")[0].setAttribute("class","active");
                    luka("li")[1].removeAttribute("class");
                    luka("li")[2].removeAttribute("class");
                    luka("#contentBoxCotrol").setAttribute("class","contentBoxBig");
                break;
                
                case 1:
                    luka("li")[0].removeAttribute("class");
                    luka("li")[1].setAttribute("class","active");
                    luka("li")[2].removeAttribute("class");
                    luka("#contentBoxCotrol").setAttribute("class","contentBox");
                break;
                
                case 2:
                    luka("li")[0].removeAttribute("class");
                    luka("li")[1].removeAttribute("class");
                    luka("li")[2].setAttribute("class","active");
                    luka("#contentBoxCotrol").setAttribute("class","contentBoxSmall");
                break;
            }
        }
    }
}

知識點

switch的運用

setAttribute 和 removeAttribute的使用

css樣式的復用及覆蓋

思考：luka現在只能實現獲取一個ID或者一個classNanme或者一個TagName，怎么實現原生js的連綴功能呢？

云服務器 GPU云服務器 javascript新手教程新手學javascript 新手學習javascript javascript新手學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89057.html

javascript新手實例2-CSS操作

摘要：他背后的故事，令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了，在小程序面世伊始，有觀點認為它能夠取代手機，給用戶帶來更清爽的體驗。周末快樂，今天給大家一個經常會用的例子，TAB切換，TAB的原理就是用js來控制不同層的display屬性，今天給大家這個也是同樣的原理，還是操作css的更多，用js把文章顯示區域的css對應切換，這樣就實現了不同的顯示效果。還...

ormsf 2019-08-30 13:46 評論0 收藏0
javascript新手實例2-CSS操作

摘要：他背后的故事，令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了，在小程序面世伊始，有觀點認為它能夠取代手機，給用戶帶來更清爽的體驗。周末快樂，今天給大家一個經常會用的例子，TAB切換，TAB的原理就是用js來控制不同層的display屬性，今天給大家這個也是同樣的原理，還是操作css的更多，用js把文章顯示區域的css對應切換，這樣就實現了不同的顯示效果。還...

mudiyouyou 2019-08-01 17:47 評論0 收藏0
javascript新手實例1-DOM基本操作

摘要：學習好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得很簡單，但是真正自己用起來又覺得寫不出什么東西，我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例，輕松今天給大家帶來第一個例子，簡單操作，效果先看下圖代碼設置樣式學習javascript好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得javascript很簡單，但是真正自己用起來又覺得寫不出什么東西，...

phoenixsky 2019-08-30 13:46 評論0 收藏0
javascript新手實例1-DOM基本操作

摘要：學習好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得很簡單，但是真正自己用起來又覺得寫不出什么東西，我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例，輕松今天給大家帶來第一個例子，簡單操作，效果先看下圖代碼設置樣式學習javascript好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得javascript很簡單，但是真正自己用起來又覺得寫不出什么東西，...

anRui 2019-08-01 17:45 評論0 收藏0
javascript新手實例1-DOM基本操作

摘要：學習好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得很簡單，但是真正自己用起來又覺得寫不出什么東西，我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例，輕松今天給大家帶來第一個例子，簡單操作，效果先看下圖代碼設置樣式學習javascript好多同學不知道怎么上手，跟著網上的新手教程做了一遍又覺得javascript很簡單，但是真正自己用起來又覺得寫不出什么東西，...

cocopeak 2019-08-21 17:01 評論0 收藏0