TE9手机微信场景
HTML
<!DOCTYPE html>
<html lang="en">
<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>te9</title>
<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.css">
<link rel="stylesheet" href="scss/index.css">
<script src="js/flexible.js"></script>
<script src="js/flexible_css.js"></script>
</head>
<body>
<div id="swiper-container">
<i class="music-t"></i>
<i class="music-g">
<audio src="music/Hillsong%20United%20-%20From%20the%20Inside%20Out.mp3" autoplay></audio>
</i>
<span class="iconfont"></span>
<div class="swiper-wrapper">
<div class="swiper-slide box-1">
<h2 class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">曲之有道</h2>
<h3 class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">双面2.5D曲面屏幕，精彩不止一面</h3>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">
<img src="data:images/bg12-img1.png"/>
</p>
<span class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s">T9E双曲面屏幕闪耀登场</span>
</div>
<div class="swiper-slide box-2">
<h2 class="ani"
swiper-animate-effect="bounceInDown"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">性能与外观，为你而生</h2>
<p class="ani"
swiper-animate-effect="rotateInDownRight"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s"><img src="data:images/bg12-img2.png"/></p>
<span class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">T9E突破创新的优美设计风格，兼顾性能与美观，在万众瞩目中闪耀登场。玻璃与金属材质的结合缔造美妙外观。四色机身华彩飞扬。</span>
</div>
<div class="swiper-slide box-3">
<p>双2.5D弧面玻璃</p>
<p>真正打动人的美</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="data:images/bg3-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s">T9E用双面流畅的弧线玻璃来阐述极简的自然美学，宛如清晨的露珠骤然滴落，汇聚成莹润的机身，亦动亦静。</p>
</div>
<div class="swiper-slide box-4">
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">精彩不止一面</p>
<p class="ani"
swiper-animate-effect="fadeInLeft"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="data:images/bg4-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s">T9E机身背部同样采用了玻璃材质，触感非常的顺滑，背部整体的设计非常简单。</p>
</div>
<div class="swiper-slide box-5">
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="data:images/bg5-img.png"/></p>
<p class="ani"
swiper-animate-effect="bounceInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="0.3s">金属与玻璃的巧妙融合</p>
<p class="ani"
swiper-animate-effect="rotateInUpLeft"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">金属中框使用高档的锌铝合金，结实稳固锻造坚毅品格。正背两面使用第三代康宁大猩猩玻璃，抗损性能值得信赖。 </p>
</div>
<div class="swiper-slide box-6">
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s"><img src="data:images/bg6-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="2.5s"
swiper-animate-delay="0.3s"> 一体纤致高金属机身</p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s">尽享感握之美</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s"> T9E拥有一体成型的高质金属机身，精湛工艺让钱包机身显现动人曲线，机身与屏幕达到无缝贴合。</p></p>
</div>
<div class="swiper-slide box-7">
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2.5s"
swiper-animate-delay="0.8s">纤薄之行，流线之美</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="1.2s"> 强劲四核 畅想4G</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="1.5s">双卡双待，平衡之道</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s"><img src="data:images/bg7-img.png" height="500" width="365"/></p>
</div>
<div class="swiper-slide box-8">
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="data:images/bg8-img1.png"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.8s"><img src="data:images/bg8-img2.png"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="1s">搭载全球领先的联发科MT673528纳米64位架构Cortex-A53四核处理器，处理器速度提升20%，能耗节省35%。</p>
</div>
<div class="swiper-slide box-9">
<p class="ani">
<img src="data:images/bg9.jpg" height="960" width="1344"/>
</p>
<p class="ani"
swiper-animate-effect="flash"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="data:images/bg9-img.png" height="480" width="576"/></p>
<p class="ani"
swiper-animate-effect="shake"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">800万后置+500万前置</p>
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">T9E采用800万像素背照式传感器，F/2.2大光圈，前置摄像头诠释新自拍神器，消去讨厌的高光斑，让皮肤变得轻柔细腻。</p>
</div>
<div class="swiper-slide box-10">
<span class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">详细参数></span>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 屏幕显示：5.0英寸、1280*720（HD）、电容屏</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 手机制式：双卡双待 网络连接2G/3G/4G</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> CPU型号：MT6735 1.5GHz四核</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 摄像头： 800万像素（AF）+500万像素</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 电池容量：2000mAh </p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 存储容量：ROM8GB+RAM1GB</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 尺寸规格：143.1×72×8.2mm 重量：175g（含标准电池）</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 扩展内存：外置存储卡 MicroSD（TF）（最大支持32GB）</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 音频：MP3/MIDI/AAC/WMA/PCM/OGG视频：MP4/3GP</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 颜色：铂光金、星钻黑、金白、银白</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 其他配置：蓝牙、FM、WLAN、重力、距离感应器</p>
<img class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="0.8s" src="data:images/bg3-img.png" height="424" width="480"/>
</div>
<div class="swiper-slide box-11">
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">点击按钮联系我们</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.5s">联系我们</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 深圳市爱我科技有限公司</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 营销总部咨询电话：0755-29619999-1890</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 联系人：罗女士</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 亦可登陆爱我科技官网：www.szlovme.com</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 爱我微信公众号：爱我手机</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.8"><img src="data:images/bg11-img.jpg"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="1s"><img src="data:images/love.png"/></p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="../bower_components/swiper/dist/js/swiper.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script>
(function(){ var swiper = new Swiper("#swiper-container",{
loop:true,
pagination:".swiper-pagination",
paginationType:"progress",
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
}) var musicC = document.querySelector(".music-t");
var musicNote = document.querySelector(".music-g");
var audio = document.querySelector("audio"); musicC.addEventListener("click",function(){
if(audio.paused){
audio.play();
musicNote.style.zIndex =4;
musicC.style.animationPlayState = "running";
}else {
musicNote.style.zIndex =-1;
audio.pause();
musicC.style.animationPlayState = "paused";
}
})
})()
</script>
</body>
</html> scss:
*{
margin:0;padding:0;
}
a{
text-decoration:none;
}
body{
font-family: 'Microsoft Yahei',Tahoma,Helvetica,Arial,sans-serif;
}
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
$fontsize:64;
@function px2Rem($px){
@return $px / $fontsize + rem;
}
%webpage{
width:100%;
height:100%;
}
html,body{
@extend %webpage;
}
#swiper-container{
max-width:640px;
margin:0 auto;
position:relative;
z-index: 5;
overflow: hidden;
@extend %webpage;
& .music-t{
position:absolute;
width:px2Rem(44);
height:px2Rem(44);
right:px2Rem(40);
top:px2Rem(40);
background:url(../images/music.png) no-repeat;
background-size: cover;
z-index:20;
animation:cir 1s linear infinite;
}
& .music-g{
background:url(../images/music.gif) no-repeat;
background-size: cover;
width:px2Rem(70);
height:px2Rem(70);
position:absolute;
top:px2Rem(10);
right:px2Rem(10);
z-index:3;
}
& .iconfont{
position: absolute;
background-size: contain;
display:block;
top:50%;
right:10%;
width: px2Rem(36);
height: px2Rem(60);
z-index: 20;
animation: showRight 1s linear infinite;
}
}
@keyframes showRight {
from {
right:px2Rem(30);
opacity: 1;
}
to {
right:px2Rem(40);
opacity: 0;
}
}
.box-1{
@extend %webpage;
background: url("../images/bg12.jpg") no-repeat;
background-size: cover;
& h2{
font-size:px2Rem(80);
text-align:center;
padding-top:px2Rem(60);
}
& h3{
font-size:px2Rem(15);
text-align:center;
padding-top:px2Rem(40);
}
& span{
font-size:px2Rem(40);
position:absolute;
top:px2Rem(850);
left:px2Rem(140);
}
}
.box-1 p:nth-of-type(1){
position:absolute;
top:px2Rem(300);
left:px2Rem(160);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(320);
height:px2Rem(477);
}
}
.box-2{
background: url("../images/bg12.jpg") no-repeat;
background-size: cover;
z-index: 10;
& h2{
font-size:px2Rem(60);
text-align:center;
padding-top:px2Rem(150);
}
& span{
position:absolute;
top:px2Rem(700);
font-size:px2Rem(30);
text-indent: 3em;
}
}
.box-2 p:nth-of-type(1){
position:absolute;
top:px2Rem(200);
left:px2Rem(40);
background-size: cover;
z-index:15;
& img{
width:px2Rem(550);
height:px2Rem(515);
}
}
.box-3{
background: url("../images/bg3.jpg") no-repeat;
background-size: cover;
}
.box-3 p:nth-of-type(1){
color:#fff;
font-size:px2Rem(50);
box-sizing: border-box;
padding:0 0 px2Rem(10) px2Rem(100);
margin-top:px2Rem(250);
animation:cir 3s linear infinite;
}
.box-3 p:nth-of-type(2){
color:#fff;
font-size:px2Rem(50);
box-sizing: border-box;
padding-left:px2Rem(220);
transform-origin:center;
animation:cir 3s linear infinite;
}
.box-3 p:nth-of-type(3){
position:absolute;
top:px2Rem(400);
left:px2Rem(100);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(480);
height:px2Rem(424);
}
}
.box-3 p:nth-of-type(4){
position:absolute;
top:px2Rem(760);
color:#fff;
font-size:px2Rem(30);
text-indent: 2em;
}
.box-4{
background: url("../images/bg4.jpg") no-repeat;
background-size: cover;
}
.box-4 p:nth-of-type(1){
font-size:px2Rem(50);
color:#fff;
font-weight:bold;
box-sizing: border-box;
padding:px2Rem(180) 0 0 px2Rem(230);
}
.box-4 p:nth-of-type(2){
position:absolute;
top:px2Rem(200);
left:px2Rem(40);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(700);
height:px2Rem(656);
}
}
.box-4 p:nth-of-type(3){
font-size:px2Rem(30);
color:#fff;
text-indent: 2em;
position:absolute;
top:px2Rem(800);
left:px2Rem(30);
}
.box-5{
background: url("../images/bg5.jpg") no-repeat;
background-size: cover;
}
.box-5 p:nth-of-type(1){
position:absolute;
top:px2Rem(100);
left:px2Rem(-30);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(700);
height:px2Rem(656);
}
}
.box-5 p:nth-of-type(2){
font-size:px2Rem(40);
color:#fff;
box-sizing: border-box;
padding:px2Rem(770) 0 0 px2Rem(150);
}
.box-5 p:nth-of-type(3){
font-size:px2Rem(30);
color:#fff;
box-sizing: border-box;
text-indent: 2em;
padding-left:px2Rem(20);
}
.box-6{
background: url("../images/bg6.jpg") no-repeat;
background-size: cover;
}
.box-6 p:nth-of-type(1){
background-size: cover;
z-index: 10;
& img{
width:px2Rem(500);
height:px2Rem(468);
}
}
.box-6 p:nth-of-type(2){
font-size:px2Rem(48);
color: #0d0d0d;
font-weight:bold;
box-sizing: border-box;
padding:px2Rem(20) 0 0 px2Rem(30);
}
.box-6 p:nth-of-type(3){
font-size:px2Rem(48);
color: #0d0d0d;
font-weight:bold;
text-indent: 5em;
box-sizing: border-box;
padding-top:px2Rem(30);
}
.box-6 p:nth-of-type(4){
font-size:px2Rem(30);
box-sizing: border-box;
padding:px2Rem(20) 0 0 px2Rem(20);
}
.box-7{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
}
.box-7 p:nth-of-type(1){
font-size:px2Rem(48);
font-weight:bold;
text-align:center;
box-sizing: border-box;
padding-top:px2Rem(150);
}
.box-7 p:nth-of-type(2){
font-size:px2Rem(40);
text-align:center;
box-sizing: border-box;
padding-top:px2Rem(20);
}
.box-7 p:nth-of-type(3){
font-size:px2Rem(40);
text-align:center;
box-sizing: border-box;
padding-top: px2Rem(30);
}
.box-7 p:nth-of-type(4){
background-size:cover;
z-index: 10;
position: absolute;
left:px2Rem(130);
bottom:px2Rem(30);
& img{
width:px2Rem(365);
height:px2Rem(500);
}
}
.box-8{
background: url("../images/bg4.jpg") no-repeat;
background-size: cover;
}
.box-8 p:nth-of-type(1){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(100);
left:px2Rem(170);
& img{
width:px2Rem(350);
height:px2Rem(480);
}
}
.box-8 p:nth-of-type(2){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(400);
left:px2Rem(160);
& img{
width:px2Rem(400);
height:px2Rem(400);
}
}
.box-8 p:nth-of-type(3){
font-size:px2Rem(35);
color:#fff;
text-indent: 2em;
box-sizing: border-box;
padding:px2Rem(750) 0 0 0;
}
.box-9 p:nth-of-type(1){
@extend %webpage;
background-size: cover;
position:relative;
top:0;
left:0;
animation:cir1 1s linear 2s;
& img{
width:px2Rem(1000);
height:px2Rem(960);
}
}
.box-9 p:nth-of-type(2){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(100);
left:px2Rem(50);
& img{
width:px2Rem(576);
height:px2Rem(480);
}
}
.box-9 p:nth-of-type(3){
font-size:px2Rem(40);
font-weight: bold;
color:#fff;
position:absolute;
top:px2Rem(580);
left:px2Rem(140);
}
.box-9 p:nth-of-type(4){
font-size:px2Rem(30);
color:#fff;
position:absolute;
top:px2Rem(700);
left:px2Rem(20);
text-indent: 2em;
}
.box-10{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
box-sizing: border-box;
padding-top:px2Rem(100);
& span{
font-size:px2Rem(48);
color: #cf0000;
font-weight:bold;
box-sizing: border-box;
padding:0 0 0 px2Rem(50);
}
& p{
font-size:px2Rem(24);
color:#424242;
box-sizing: border-box;
padding:px2Rem(12) 0 0 px2Rem(50);
}
& img{
width:px2Rem(480);
height:px2Rem(424);
position:absolute;
top:px2Rem(650);
left:px2Rem(100);
}
}
.box-10 p:nth-of-type(1){
box-sizing: border-box;
padding-top:px2Rem(40);
}
.box-11{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
& .tip{
font-size:px2Rem(28);
color:#888;
box-sizing: border-box;
padding-top:px2Rem(8);
padding-left: px2Rem(50);
}
}
.box-11 p:nth-of-type(1){
font-size:px2Rem(32);
color: #595959;
box-sizing: border-box;
padding-top:px2Rem(20);
text-align:center;
}
.box-11 p:nth-of-type(2){
font-size:px2Rem(32);
color: #fff;
background:red;
line-height:px2Rem(70);
width:px2Rem(260);
height:px2Rem(70);
margin:px2Rem(60) 0 0 px2Rem(190);
text-align:center;
}
.box-11 p:nth-of-type(3){
box-sizing:border-box;
padding-top:px2Rem(60);
}
.box-11 p:nth-of-type(8){
position: absolute;
top:px2Rem(500);
left:px2Rem(160);
& img{
width:px2Rem(300);
height:px2Rem(301);
}
}
.box-11 p:nth-of-type(9){
position: absolute;
top:px2Rem(830);
left:px2Rem(170);
& img{
width:px2Rem(290);
height:px2Rem(60);
}
}
@keyframes cir {
50%{
transform:rotate(0deg)
}
0%{
transform:rotate(2deg)
}
100%{
transform:rotate(-4deg)
}
}
@keyframes cir1{
0%{
left:px2Rem(-10);
}
20%{
left:px2Rem(-40);
}
40%{
left:px2Rem(-20);
}
60%{
right:px2Rem(20);
}
80%{
right:px2Rem(20);
}
100%{
left:px2Rem(10);
}
}
TE9手机微信场景的更多相关文章
- 【干货】微信场景之H5页面制作免费工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
- HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 给大家带来的是HTML5仿手机微信聊天界面, ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- 如何用有NFC功能的手机微信给公交卡充值？入口在那里？
如何用有NFC功能的手机微信给公交卡充值?入口在那里? 需要两个前提: 1.NFC功能手机授权同意微信获取权限. 2.打开微信,并把公交卡放在手机背面贴紧. 选择下方的[充值金额],可以是10元.20 ...
- table-cell的手机应用场景
前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒 ...
- 在微博微信场景下学习Redis数据结构
Redis安装 下载地址:http://redis.io/download 安装步骤: 1.yum install gcc 2.wget http://download.redis.io/releas ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- 生鲜水果商城PC手机微信完整版源码2018版（免费）
采用php+mysql架构,含有PC.手机.微信三端,只需要修改一下数据库配置,并恢复一下数据即可使用,还有微信.支付宝等接口,如有问题请在文章下面留言一下,我看到会协助一下的,下载包里面含有详细的安 ...
- 安卓手机微信页面position: fixed位置错误
今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样 ...
随机推荐
- 【原创】xgboost 特征评分的计算原理
xgboost是基于GBDT原理进行改进的算法,效率高,并且可以进行并行化运算: 而且可以在训练的过程中给出各个特征的评分,从而表明每个特征对模型训练的重要性, 调用的源码就不准备详述,本文主要侧重的 ...
- javascript进阶系列专题：作用域与作用域链
字面意思,作用域是指变量和函数的作用范围,换言之,作用域决定了变量和函数的可见性和有效时间.javascript作用域是用函数来区分,与其他语言的大括号不同. for (var i=0; i<5 ...
- include包含头文件的语句中,双引号和尖括号的区别是什么?
include包含头文件的语句中,双引号和尖括号的区别是什么? #include <> 格式:引用标准库头文件,编译器从标准库目录开始搜索 尖括号表示只在系统默认目录或者括号内的路径查找 ...
- ActionBar compat 如何禁用ActionBar的显示/隐藏动画
ActionBar compat 如何关闭ActionBar的显示隐藏动画 @Override public boolean onCreateOptionsMenu(Menu menu) { //消除 ...
- 让Git记住用户名和密码
user/username/.gitconfig [credential] helper = store
- 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳
<Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...
- AngularJS学习笔记
一.初识AngularJS:1.Angularjs通过创建实时模板来代替视图,而不是将数据合并进模板后更新DOM,任何一个独立视图组件中的值都是动态替换的. 二.数据绑定和第一个AngularJS W ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- yii2 框架的 save() 方法 执行模式条件。
save() 方法会调用 insert() 和 update() 中的一个, 用哪个取决于当前 AR 对象是不是新对象(在函数内部,他会检查 yii\db\ActiveRecord::isNewRe ...
- 高性能Web服务器Nginx的配置与部署研究系列（1）-- 入门 hello work
简介: Nginx 是一个基于 BSD-like 协议.开源.高性能.轻量级的HTTP服务器.反向代理服务器以及电子邮件(SMTP.POP3.IMAP)服务器.Nginx 是由一个俄罗斯的名叫“Igo ...