移动端新增小部件切换

This commit is contained in:
底层用户 2021-09-28 20:56:14 +08:00
parent 46ddf457a7
commit 0579e3b0e9
3 changed files with 31 additions and 8 deletions

View File

@ -230,3 +230,14 @@
-o-animation: fade 0.5s; -o-animation: fade 0.5s;
-ms-animation: fade 0.5s; -ms-animation: fade 0.5s;
} }
/*
移动端功能区切换
*/
.mobile .col.hitokotos {
display: none;
}
.mobile .col.times {
display: block;
}

View File

@ -115,7 +115,7 @@
<div class="col right"> <div class="col right">
<div class="main-right"> <div class="main-right">
<!--功能区--> <!--功能区-->
<div class="row rightone"> <div class="row rightone" id="rightone">
<div class="col hitokotos"> <div class="col hitokotos">
<!--一言--> <!--一言-->
<div class="hitokoto cards" id="hitokoto"> <div class="hitokoto cards" id="hitokoto">
@ -211,7 +211,7 @@
<a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a> <a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a>
</div> </div>
<!--第二屏 Logo--> <!--第二屏 Logo-->
<div class="logo" style="display: none"> <div class="logo cards" style="display: none" onclick="changeMore()">
<a>imsyy.top</a> <a>imsyy.top</a>
</div> </div>
<!--更多内容--> <!--更多内容-->

View File

@ -252,12 +252,13 @@ function closeBox() {
//监听网页宽度 //监听网页宽度
window.addEventListener('load', function () { window.addEventListener('load', function () {
//console.log(window.innerWidth);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
//console.log(window.innerWidth);
//关闭移动端样式 //关闭移动端样式
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
document.getElementById("container").classList.remove('menus'); document.getElementById("container").classList.remove('menus');
document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
//移除移动端切换功能区
document.getElementById("rightone").classList.remove('mobile');
} }
//移动端隐藏更多页面 //移动端隐藏更多页面
if (window.innerWidth <= 990) { if (window.innerWidth <= 990) {
@ -266,18 +267,29 @@ window.addEventListener('load', function () {
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘"; document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
} }
}) })
}) })
//移动端切换功能区
function changeMore() {
var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if (more == '0') {
document.getElementById("rightone").classList.add('mobile');
document.cookie = "more=1;path=/";
} else {
document.getElementById("rightone").classList.remove('mobile');
document.cookie = "more=0;path=/";
}
}
//更多页面显示关闭按钮 //更多页面显示关闭按钮
$("#more").hover(function(){ $("#more").hover(function () {
document.getElementById("close").style.cssText = "display: block"; document.getElementById("close").style.cssText = "display: block";
},function(){ }, function () {
document.getElementById("close").style.cssText = "display: none"; document.getElementById("close").style.cssText = "display: none";
}) })
//屏蔽右键 //屏蔽右键
document.oncontextmenu = function(){ document.oncontextmenu = function () {
iziToast.info({ iziToast.info({
icon: 'fad fa-do-not-enter', icon: 'fad fa-do-not-enter',
title: '温馨提醒', title: '温馨提醒',