资讯专栏INFORMATION COLUMN

javascript新手实例2-CSS操作

mudiyouyou / 1180人阅读

摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。

周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。

还是那句话:“每天一例,轻松javascrip”

老规矩,先上图:

html代码



    
        
        图片显示模式切换★
        
        
    
    
        

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的连缀功能呢?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51374.html

相关文章

  • javascript新手实例2-CSS操作

    摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。 周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。 还...

    ormsf 评论0 收藏0
  • javascript新手实例2-CSS操作

    摘要:他背后的故事,令人动容只是逗你玩为何小程序目前难以取代微信小程序也已经推出了一段时间了,在小程序面世伊始,有观点认为它能够取代手机,给用户带来更清爽的体验。 周末快乐,今天给大家一个经常会用的例子,TAB切换,TAB的原理就是用js来控制不同层的display属性,今天给大家这个也是同样的原理,还是操作css的更多,用js把文章显示区域的css对应切换,这样就实现了不同的显示效果。 还...

    jayce 评论0 收藏0
  • javascript新手实例1-DOM基本操作

    摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式 学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,...

    phoenixsky 评论0 收藏0
  • javascript新手实例1-DOM基本操作

    摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式 学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,...

    anRui 评论0 收藏0
  • javascript新手实例1-DOM基本操作

    摘要:学习好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做所以我们的口号是每天一例,轻松今天给大家带来第一个例子,简单操作,效果先看下图代码设置样式 学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,...

    cocopeak 评论0 收藏0

发表评论

0条评论

mudiyouyou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<