美文网首页
前端常见需求

前端常见需求

作者: 山不转人自转 | 来源:发表于2020-10-07 12:19 被阅读0次

    页面滚动

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            #scroll-item{
                margin-top: 20px;
            }
            #scroll-item li{
                width: 400px;
                height: 120px;
                margin-top: 300px;
                margin-left: 100px;
                background: aquamarine;
                font-size: 30px;
            }
            .item-border{
                border: 10px solid #ff6700;
            }
        </style>
    </head>
    <body>
    <ul id="scroll-item">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    </body>
    <script>
        $(document).ready(function(){
    
            $(document).scroll(function() {
                let liArr = $('#scroll-item > li');
                let scrollTop = $(document).scrollTop();//页面滚动的距离
                for(let i=0,len=liArr.length;i<len;i++){
                    let top = liArr[i].offsetTop - scrollTop;//每个元素距离页面顶部距离
                    if(top >= 300 && top <= 600){//元素距离浏览器窗口 顶部 的距离
                        if($(liArr).eq(i).prop("className") !== 'item-border'){
                            $(liArr).eq(i).addClass('item-border');
                            $(liArr).eq(i).siblings().removeClass('item-border');
                        }
                    }
                }
            });
    
        });
    </script>
    </html>
    

    展开和折叠

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            .title{
                width: 300px;
                height: 20px;
                background: aquamarine;
            }
            .title > span{
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                float: right;
            }
            .arrow-dis{
                background: chartreuse;
            }
            .arrow-undis{
                background: #ff6700;
            }
            .answer{
                width: 300px;
                height: 50px;
                background: #ff6700;
                display: none;
            }
        </style>
    </head>
    <body>
    <div>
        <div class="title">问题一<span class="arrow-undis"></span></div>
        <div class="answer">这是问题一的答案</div>
    </div>
    <div>
        <div class="title">问题二<span class="arrow-undis"></span></div>
        <div class="answer">这是问题二的答案</div>
    </div>
    <div>
        <div class="title">问题三<span class="arrow-undis"></span></div>
        <div class="answer">这是问题三的答案</div>
    </div>
    </body>
    <script>
        $(document).ready(function(){
    
            $('.title').on('click',function(){
                let status = $(this).children('span').attr('class');
                if(status === 'arrow-undis'){
                    $(this).siblings('.answer').css("display","block");
                    $(this).children('span').removeClass('arrow-undis').addClass('arrow-dis');
                }else{
                    $(this).siblings('.answer').css("display","none");
                    $(this).children('span').removeClass('arrow-dis').addClass('arrow-undis');
                }
            });
    
        });
    </script>
    </html>
    

    监听器滚动到顶部或底部

    window.addEventListener('scroll',this.scroll);
    window.removeEventListener('scroll',this.scroll);
    scroll(){
            let screenH = window.screen.availHeight;
            let scrollTop = document.body.scrollTop;
            let documentH = document.body.scrollHeight;
            if(screenH + scrollTop >= documentH){
              console.log('bottom');
            }
    if(scrollTop <= 0{
              console.log('top');
            }
    }  
    ```
    **判断在不同设备、不同浏览器启动web项目**
    ```
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {   //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            //在微信中打开
        }
        if (ua.match(/WeiBo/i) == "weibo") {
            //在新浪微博客户端打开
        }
        if (ua.match(/QQ/i) == "qq") {
            //在QQ空间打开
        }
        if (browser.versions.ios) {
            //是否在IOS浏览器打开
        }
        if(browser.versions.android){
            //是否在安卓浏览器打开
        }
    } else {
        //否则就是PC浏览器打开
    }
    ```
    

    相关文章

      网友评论

          本文标题:前端常见需求

          本文链接:https://www.haomeiwen.com/subject/kbdfpktx.html