would you please quote jquery.js, to run the code? it"s OK on Xiaomi phone. There are obvious stutters on Huawei Meizu and vivo, iphoneSE can, and iphone6s have obvious stutters. There must be this kind of problem in some untested models. I don"t know what the problem is. Thank you for your help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title></title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/common/jQuery-2.1.4.js"></script>
<script type="text/javascript" src="js/common/index.js" ></script>
<style>
body {
background: -webkit-radial-gradient(circle, -sharp2d4959 0%, -sharp101821 100%);
background: radial-gradient(circle, -sharp2d4959 0%, -sharp101821 100%);
}
</style>
</head>
<body>
<div class="index_content">
<div class="index_menu page-active-1">
<div class="index_menu-item index_menu-item-1 m--btn js-menuBtn" data-page="1">
<span class="index_menu-item-content"></span>
</div>
<div class="index_menu-item index_menu-item-2" data-page="2">
<span style="left: -18px;" class="index_menu-item-content"></span>
</div>
<div class="index_menu-item index_menu-item-3" data-page="3">
<span class="index_menu-item-content"></span>
</div>
<div class="index_menu-item index_menu-item-4" data-page="4">
<span style="left: -18px;" class="index_menu-item-content"></span>
</div>
<div class="index_menu-item index_menu-item-5" data-page="5">
<span class="index_menu-item-content"></span>
</div>
</div>
<div class="index_page index_page-1 active">
<h2 class="index_page-heading">
<span class="index_page-heading-colored"></span>
</h2>
<div class="index_user">
</div>
<div class="index_mess">
<ul class="index_ul">
</ul>
</div>
</div>
<div class="index_page index_page-2">
<h2 class="index_page-heading">
<span class="index_page-heading-colored"></span>
</h2>
<ul class="index_ul2">
</ul>
</div>
<div class="index_page index_page-3">
<h2 class="index_page-heading">
<span class="index_page-heading-colored"></span>
</h2>
<div class="index_box">
<ul class="index_ul3">
</ul>
</div>
</div>
<div class="index_page index_page-4">
<h2 class="index_page-heading">
<span class="index_page-heading-colored"></span>
</h2>
<ul class="index_ul4">
</ul>
</div>
<div class="index_page index_page-5">
<h2 class="index_page-heading"></h2>
<ul class="index_ul5">
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0 auto;
}
html,body {
height: 100%;
overflow: hidden; //
width: 100%;
min-width: 320px;
min-height: 480px;
font-family: "";
background: -sharpfff;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-input-placeholder {
color: -sharpB3B3B3;
}
a,input,p,div {
-webkit-tap-highlight-color: rgba(0,0,0,0); //
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
textarea {
resize: none;
}
textarea, input {
font-family: "";
}
.animated {
animation-duration:200ms!important;
}
/*
* css
*/
.top {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 50px;
line-height: 50px;
z-index: 999;
text-align: center;
}
.top>em {
font-size: 18px;
color: -sharpfff;
}
content {
position: absolute;
top:50px;
left:0;
right: 0;
bottom:0;
z-index: 9;
overflow: auto;
}
.index_content {
z-index: 1;
position: relative;
height: 100%;
background: -sharp103142;
overflow: hidden;
transition: all 0.3s;
}
.index_menu {
position: absolute;
left: 0;
top: 24%;
}
.index_menu:after {
z-index: -2;
content: "";
position: absolute;
left: 0;
top: -64px;
width: 92px;
height: 322px;
-webkit-clip-path: polygon(0 0, 100% 53px, 100% 269px, 0 100%);
clip-path: polygon(0 0, 100% 53px, 100% 269px, 0 100%);
pointer-events: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.index_menu.menu-active:after {
z-index: 10;
opacity: 1;
-webkit-transition: all 0.3s 0.5s;
transition: all 0.3s 0.5s;
}
.index_menu.page-active-1:after {
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
}
.index_menu.page-active-2:after {
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
background: linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
}
.index_menu.page-active-3:after {
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
background: linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
}
.index_menu.page-active-4:after {
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
background: linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
}
.index_menu.page-active-5:after {
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
background: linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
}
.index_menu-item {
z-index: -1;
position: absolute;
left: 0;
width: 92px;
height: 106px;
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
cursor: pointer;
overflow: hidden;
transition: all 0.3s, -webkit-clip-path 0.2s;
opacity: 0;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.index_menu-item-1 {
top: -64px;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.menu-active .index_menu-item-1 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.index_menu-item-2 {
top: -10px;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.menu-active .index_menu-item-2 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.index_menu-item-3 {
top: 44px;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.menu-active .index_menu-item-3 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.index_menu-item-4 {
top: 98px;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.menu-active .index_menu-item-4 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.index_menu-item-5 {
top: 152px;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.menu-active .index_menu-item-5 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.index_menu-item:nth-child(even) {
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.index_menu-item:nth-child(even):after {
-webkit-transform: translate3d(60px, 0, 0) rotate(90deg);
transform: translate3d(60px, 0, 0) rotate(90deg);
}
.index_menu-item:nth-child(even) .index_menu-item-content {
-webkit-transform: translate3d(60px, 0, 0);
transform: translate3d(60px, 0, 0);
}
.index_menu-item-1 {
-webkit-transform: translate(0, -140px);
transform: translate(0, -140px);
}
.index_menu-item-2 {
-webkit-transform: translate(20px, -220px);
transform: translate(20px, -220px);
}
.index_menu-item-3 {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.index_menu-item-4 {
-webkit-transform: translate(20px, 220px);
transform: translate(20px, 220px);
}
.index_menu-item-5 {
-webkit-transform: translate(0, 140px);
transform: translate(0, 140px);
}
.menu-active .index_menu-item {
z-index: 2;
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
background-color: -sharp0299DC;
}
.index_menu-item:after {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
width: 16px;
height: 12px;
background: -webkit-linear-gradient(-sharpfff 0, -sharpfff 2px, transparent 2px, transparent 5px, -sharpfff 5px, -sharpfff 7px, transparent 7px, transparent 10px, -sharpfff 10px, -sharpfff 100%);
background: linear-gradient(-sharpfff 0, -sharpfff 2px, transparent 2px, transparent 5px, -sharpfff 5px, -sharpfff 7px, transparent 7px, transparent 10px, -sharpfff 10px, -sharpfff 100%);
-webkit-transform: translate3d(20px, 0, 0) rotate(90deg);
transform: translate3d(20px, 0, 0) rotate(90deg);
-webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
transition: opacity 0.7s, -webkit-transform 0.7s;
transition: transform 0.7s, opacity 0.7s;
transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
-webkit-transition-delay: inherit;
transition-delay: inherit;
opacity: 0;
}
.index_menu-item-content {
position: absolute;
margin-top: -8px;
left: 0;
top: 50%;
min-width: 16px;
text-align: center;
font-size: 16px;
color: -sharpfff;
-webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
transition: opacity 0.7s, -webkit-transform 0.7s;
transition: transform 0.7s, opacity 0.7s;
transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
-webkit-transition-delay: inherit;
transition-delay: inherit;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
.m--btn .index_menu-item-content {
-webkit-transform: translate3d(16px, 0, 0) rotate(-90deg);
transform: translate3d(16px, 0, 0) rotate(-90deg);
opacity: 0;
}
.index_menu-item.m--btn {
z-index: 5;
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 78px;
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.index_menu-item.m--btn:after {
-webkit-transform: translate3d(0.16rem, 0, 0);
transform: translate3d(0.16rem, 0, 0);
opacity: 1;
}
.index_page {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition: all 0.3s 0.3s ease-in-out, opacity 0.3s 0s ease-in-out;
transition: all 0.3s 0.3s ease-in-out, opacity 0.3s 0s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 0;
will-change: transform, opacity, filter;
}
.index_page.active {
z-index: 1;
opacity: 1;
}
.index_page.menu-active {
-webkit-transform: scale(0.7) translate3d(30%, 0, 0);
transform: scale(0.7) translate3d(30%, 0, 0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-filter: blur(2px);
filter: blur(2px);
pointer-events: none;
}
.index_page-heading {
margin: 0.48rem 0 0.05rem 0.22rem;
font-size: 26px;
color: -sharpfff;
}
.index_page-heading-colored {
color: -sharp0299DC;
}
.index_user {
overflow: hidden;
color: -sharpfff;
font-size: 13px;
margin-left: 0.22rem;
}
.index_user img {
float: left;
width: 36px;
margin-right: 10px;
}
.index_user p {
height: 20px;
}
.index_user b {
float: left;
height: 20px;
line-height: 14px;
}
.index_mess {
position: absolute;
top: 0.2rem;
bottom: 0;
width: 100%;
padding: 62% 0.1rem 0.50rem 0.1rem;
box-sizing: border-box;
font-size: 13px;
background: rgba(2, 153, 220, .2);
-webkit-clip-path: polygon(0% 36%, 100% 2%, 100% 100%, 0% 100%);
clip-path: polygon(0% 36%, 100% 2%, 100% 100%, 0% 100%);
}
.index_ul {
overflow: auto;
height: 100%;
}
.index_ul2 {
position: absolute;
top: 1.4rem;
bottom: 0.55rem;
width: 100%;
padding-left: 0.72rem;
box-sizing: border-box;
overflow: auto;
z-index: 9;
font-size: 13px;
}
.index_box {
position: absolute;
top: 1.3rem;
bottom: 0.55rem;
width: 100%;
padding-left: 0.72rem;
box-sizing: border-box;
overflow: auto;
z-index: 9;
}
.index_box>p {
line-height: 30px;
font-size: 16px;
color: -sharpfff;
}
.index_ul3 {
overflow: hidden;
font-size: 13px;
}
.index_ul4 {
position: absolute;
top: 1.4rem;
bottom: 0.05rem;
width: 100%;
padding-left: 0.72rem;
box-sizing: border-box;
overflow: auto;
z-index: 9;
font-size: 13px;
}
.index_ul5 {
position: absolute;
top: 1.6rem;
width: 100%;
padding-left: 1.0rem;
box-sizing: border-box;
overflow: auto;
z-index: 9;
font-size: 13px;
}
$(document).ready(function() {
var animating = false;
function menuToggle() {
$(".index_page, .index_menu").toggleClass("menu-active");
$(".js-menuBtn").toggleClass("m--btn");
$(document).off("click", ".index_content", closeNotFocusedMenu);
};
function closeNotFocusedMenu(e) {
if(!$(e.target).closest(".index_menu").length) {
menuToggle();
$(document).off("click", ".index_content", closeNotFocusedMenu);
}
};
$(document).on("click", ".js-menuBtn", function() {
if(animating) return;
menuToggle();
$(document).on("click", ".index_content", closeNotFocusedMenu);
});
$(document).on("click", ".index_menu-item:not(.js-menuBtn)", function() {
animating = true;
var $this = $(this);
var page = +$this.data("page");
$(".js-menuBtn").removeClass("js-menuBtn");
$(".index_page.active").removeClass("active");
$this.addClass("js-menuBtn m--btn");
$(".index_page-" + page).addClass("active");
$(".index_page, .index_menu").removeClass("menu-active");
$(document).off("click", ".index_content", closeNotFocusedMenu);
setTimeout(function() {
$(".index_menu")[0].className = $(".index_menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
$(".index_menu").addClass("page-active-" + page);
animating = false;
}, 1000);
});
});
Please take a look at it, thank you!