前端开发常见需求汇总

最新推荐文章于 2024-07-14 10:59:23 发布

万少博

最新推荐文章于 2024-07-14 10:59:23 发布

阅读量8.6k

点赞数 5

分类专栏： web前端开发

本文链接：https://blog.csdn.net/wanshaobo888/article/details/80109624

版权

web前端开发专栏收录该内容

55 篇文章 2 订阅

订阅专栏

最新更新时间：2018年4月27日16:13:49

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

本文内容：常见需求

1.随着页面滚动，元素到达可视区域，显示特殊样式

<!DOCTYPE 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;
        }
        #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>

2.问题答案，展开和折叠

<!DOCTYPE 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>

3.监听页面滚动到顶部或底部

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');
        }
}

4.判断在不同设备、不同浏览器启动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浏览器打开
}

感谢阅读，欢迎评论^-^

`打赏我吧^-^`

万少博

关注

5
点赞
踩
56

收藏

觉得还不错? 一键收藏
1
评论
前端开发常见需求汇总

更新日期：2018年4月27日16:13:491.随着页面滚动，元素到达可视区域，显示特殊样式&amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;quot;en&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;
复制链接

扫一扫

专栏目录