zoukankan      html  css  js  c++  java
  • 一些基本功能的实现

     // 改变背景色

    var text = document.getElementsByClassName('text')[0];
            var tit = document.getElementsByTagName('h2')[0];
            var oSpan = document.getElementsByClassName('oSpan');
            var len = oSpan.length;
            function getCol(cole, bj, a) {
                for (var i = 0; i < len; i++) {
                    oSpan[i].style.border = 'none';
                }
                if (cole == '#000') {
                    text.style.color = '#999';
                    tit.style.color = '#999';
                } else {
                    text.style.color = '#535353';
                    tit.style.color = '#535353';
                }
                document.body.style.background = cole;
                a.style.border = '1px solid' + bj;
            }

    // 改变字体大小

     var size = $('.text').css('font-size');
            var cssHeight = $('.text').css('line-height');;
            var unit = size.slice(-2);
            var fontSize = parseFloat(size);
            var lineHeight = parseFloat(cssHeight);
            $('#plus').click(function () {
                if (fontSize >= 35) {
                    return false;
                } else {
                    fontSize = fontSize + 2;
                    lineHeight = lineHeight + 2;
                    $(".text").css('font-size', fontSize + unit);
                    $(".text").css('line-height', lineHeight + unit);
                }
            })
            $('#reduce').click(function () {
                console.log(fontSize);
                if (fontSize <= 12) {
                    return false;
                } else {
                    fontSize = fontSize - 2;
                    lineHeight = lineHeight - 2;
                    $(".text").css('font-size', fontSize + unit);
                    $(".text").css('line-height', lineHeight + unit);
                }
            })

    //字体大小

    $("#large").click(function () {
                $(".content .text").css("font-size", 26);
                $("#large").addClass("active").siblings().removeClass("active");
            });
            $("#medium").click(function () {
                $(".content .text").css("font-size", 22);
                $("#medium").addClass("active").siblings().removeClass("active");
            });
            $("#small").click(function () {
                $(".content .text").css("font-size", 16);
                $("#small").addClass("active").siblings().removeClass("active");
            })

     //护眼

     $("#protect").click(function () {
                $(".content").removeClass("n_bg");
                $(".chapters").removeClass("n_bg");
                $(".content").toggleClass("eye");
                $(".chapters").toggleClass("eye");
                $("#protect").toggleClass("active");
                $("#protect").addClass("active").siblings().removeClass("active");
            })

    //开灯

     $("#off").click(function () {
                $(".content").removeClass("eye");
                $(".chapters").removeClass("eye");
                $(".content").toggleClass("n_bg");
                $(".chapters").toggleClass("n_bg");
                $("#off").siblings().removeClass("active");
                var btnText = $("#off").text();
                if (btnText == "关灯") {
                    $("#off").text("开灯");
                } else {
                    $("#off").text("关灯");
                    $(".content").removeClass("n_bg");
                    $(".chapters").removeClass("n_bg");
                    $(".content").removeClass("eye");
                    $(".chapters").removeClass("eye");
                }
            })

    //返回到顶部

    $(".top").hide();
            $(document).scroll(function () {
                var tHeight = $(document).scrollTop();
                if(tHeight > 150){
                    $(".top").fadeIn(500);
                }else{
                    $(".top").fadeOut(500);
                }
            });
            $(".top").click(function () {
                $('body,html').animate({scrollTop:0},300);
            });

    // 左侧导航栏

    $(function () {
        $('aside.slide-wrapper').on('touchstart', 'li', function (e) {
            $(this).addClass('current').siblings('li').removeClass('current');
        });
    
        $('a.slide-menu').on('click', function (e) {
            var wh = $('div.wrapperhove' + 'rtree').height();
            // console.log(wh);
            $('div.slide-mask').show();
            $('aside.slide-wrapper').css('height', wh).addClass('moved');
        });
    
        $('div.slide-mask').on('click', function () {
            $('div.slide-mask').hide();
            $('aside.slide-wrapper').removeClass('moved');
        });
    });
  • 相关阅读:
    python 参数化之读取写入yaml文件
    python实现对列表进行模糊查询
    通过UI自动化获取登录cookie,进行接口自动化测试
    Node.js初学
    Jquery 滚动到指定容器的位置,一行解决
    代码神兽护体
    React井字棋改进需求实现
    工作流开发流程
    call、apply和bind的学习
    call、apply和bind的学习
  • 原文地址:https://www.cnblogs.com/shine1234/p/13129952.html
Copyright © 2011-2022 走看看