前端常见需求
2020-10-07 本文已影响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浏览器打开
}
```
