js 3D旋转效果
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>智慧园区</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/swiper.min.css">
<!-- <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/index.css"> -->
<style>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */ article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
} html,
body {
width: 100%;
height: 100%;
} body {
line-height: 1;
} blockquote,
q {
quotes: none;
} blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
} table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */ a {
color: #7e8c8d;
-webkit-backface-visibility: hidden;
text-decoration: none;
} li {
list-style: none;
} body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} .ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} body {
background-color: #000;
font-family: "Microsoft Yahei";
} .container {
position: relative;
width: 100%;
height: 100%;
min-width: 1366px;
min-height: 768px;
overflow: hidden;
/*background: url("../images/bg.png");*/
background:black;
background-size: cover;
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} .container .header {
position: absolute;
width: 100%;
height: 60px;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: url("../images/title.png") no-repeat center top/1366px auto;
} .container .headWord {
position: absolute;
width: 100%;
height: 60px;
top: 0;
left: 0;
font: 24px "微软雅黑";
font-weight: bold;
color: #fff;
text-align: center;
text-align: -webkit-center;
line-height: 60px;
letter-spacing: 2px;
} .container .header h2 {
padding-left: 60px;
font-size: 54px;
color: #ffffff;
} .container .header .right {
position: absolute;
top: 17px;
right: 13px;
height: 24px;
line-height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
} .container .header .right a {
font-size: 16px;
color: #ffffff;
margin-right: 10px;
padding-left: 20px;
background: url("../images/icon_exit.png") no-repeat left center/auto 16px;
} .container .header .right .qr {
position: relative;
font-size: 16px;
color: #ffffff;
margin-right: 35px;
cursor: pointer;
} .container .header .right .qr:hover div {
display: block;
} .container .header .right .qr span {
padding-left: 20px;
background: url("../images/icon_app.png") no-repeat left center/auto 16px;
} .container .header .right .qr div {
position: absolute;
display: none;
top: 30px;
left: 0;
width: 100px;
height: 100px;
padding: 5px;
background-color: #fff;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
} .container .header .right .qr div img {
width: 100%;
height: 100%;
} .container .top {
position: relative;
z-index: 20;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 350px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -60px;
} .container .top .left {
width: 370px;
position: relative;
margin-right: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
} .container .top .left .scene {
position: relative;
width: 200px;
height: 160px;
-webkit-perspective: 1000px;
perspective: 1000px;
} .container .top .left .carousel {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: translateZ(-288px);
transform: translateZ(-288px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
} .container .top .left .carousel__cell {
position: absolute;
width: 154px;
height: 136px;
left: 23px;
top: 12px;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, -webkit-transform 1s;
transition: transform 1s, opacity 1s;
transition: transform 1s, opacity 1s, -webkit-transform 1s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} .container .top .left .carousel__cell img {
width: 100%;
height: 100%;
} .container .top .left .arrow-pre,
.container .top .left .arrow-next {
width: 43px;
height: 43px;
outline: none;
border: none;
/*background: url("../images/up.png");*/
background: red;
background-size: 100% 100%;
cursor: pointer;
} .container .top .left .arrow-next {
/*background: url("../images/down.png");*/
background: red; } .container .top .right {
width: 520px;
margin-left: 70px;
height: 100%;
overflow: hidden;
} .container .top .right .swiper-container {
height: 100%;
} .container .top .right .swiper-container .swiper-slide {
position: relative;
} .container .top .right .swiper-container .swiper-slide h4 {
font-size: 36px;
color: #ffffff;
margin-bottom: 20px;
} .container .top .right .swiper-container .swiper-slide span {
display: inline-block;
height: 40px;
line-height: 36px;
text-align: center;
padding: 0 20px;
font-size: 20px;
color: #ffffff;
margin-right: 10px;
border: 2px solid rgba(0, 252, 255, 0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(43, 111, 235, 0.3);
border-radius: 20px;
} .container .top .right .swiper-container .swiper-slide p {
margin-top: 60px;
font-size: 16px;
color: #ffffff;
line-height: 36px;
} .container .top .right .swiper-container .swiper-slide a {
display: block;
margin-top: 20px;
width: 120px;
height: 42px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 38px;
text-align: center;
border-radius: 20px;
border: solid 2px #ffffff;
font-size: 20px;
color: #ffffff;
background-color: transparent;
-webkit-transition: all 0.6s;
transition: all 0.6s;
} .container .top .right .swiper-container .swiper-slide a:hover {
background-color: rgba(255, 255, 255, 0.8);
color: #666;
} .container .top .right .swiper-container .swiper-slide .server {
position: absolute;
width: 120px;
height: 120px;
bottom: 0;
right: 0;
} .container .bottom {
position: absolute;
width: 1084px;
height: 163px;
bottom: 65px;
left: 50%;
margin-left: -542px;
z-index: 20;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-image: url("../images/bottom-box.png");
background-size: 100%;
-webkit-transition: all 1s;
transition: all 1s;
} .container .bottom::before {
position: absolute;
content: '';
width: 75px;
height: 177px;
background: url("../images/bottom-left.png") no-repeat left center/auto 177px;
top: 0;
left: -75px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
} .container .bottom::after {
position: absolute;
content: '';
width: 75px;
height: 177px;
background: url("../images/bottom-left.png") no-repeat right center/auto 177px;
top: 0;
right: 357px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
} .container .bottom.goright::before {
left: 651px;
} .container .bottom.goright::after {
right: -75px;
} .container .bottom .left {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 649px;
height: 169px;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 23px 10px 19px;
} .container .bottom .left li:nth-child(1) i {
background-image: url("../images/icon_1_1.png");
} .container .bottom .left li:nth-child(2) i {
background-image: url("../images/icon_1_2.png");
} .container .bottom .left li:nth-child(3) i {
background-image: url("../images/icon_1_3.png");
} .container .bottom .left li:nth-child(4) i {
background-image: url("../images/icon_1_4.png");
} .container .bottom .left li:nth-child(5) i {
background-image: url("../images/icon_1_5.png");
} .container .bottom .right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 354px;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 23px 10px 19px;
} .container .bottom .right li:nth-child(1) i {
margin-left: -2px;
background-image: url("../images/icon_1_5.png");
} .container .bottom .right li:nth-child(2) i {
background-image: url("../images/icon_1_6.png");
} .container .bottom h4 {
font-size: 17px;
line-height: 20px;
padding-bottom: 4px;
color: #02f6ff;
font-family: "Microsoft Yahei";
border-bottom: 2px solid #02f6ff;
} .container .bottom ul {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
} .container .bottom ul::before {
position: absolute;
left: 0;
top: 0;
height: 92%;
width: 100%;
content: '';
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
} .container .bottom ul li {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
opacity: 0.6;
} .container .bottom ul li p {
font-size: 14px;
color: #fff;
} .container .bottom ul li i {
display: block;
width: 31px;
height: 31px;
background-size: 31px auto;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 15px;
} .container .bottom ul li::before {
position: absolute;
display: none;
left: 0;
top: 0;
height: 80%;
width: 100%;
content: '';
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
border-top: 4px solid #00f6ff;
} .container .bottom ul li.active,
.container .bottom ul li:hover {
opacity: 1;
} .container .bottom ul li.active::before,
.container .bottom ul li:hover::before {
display: block;
} .container .bottom ul li.active {
background: url("../images/bottom-select.png") no-repeat center 10px/116px auto;
} .container .left-nav {
position: absolute;
z-index: 22;
right: 0;
top: 100px;
} .container .left-nav li {
position: relative;
margin-bottom: 2px;
} .container .left-nav li p {
width: 51px;
height: 60px;
background: url("../images/bd.png");
background-size: 100%;
line-height: 60px;
font-weight: bold;
font-size: 18px;
font-style: italic;
color: rgba(255, 255, 255, 0.5);
text-align: center;
-webkit-transition: all 0.1s;
transition: all 0.1s;
} .container .left-nav li a {
position: absolute;
top: 0;
left: 60px;
display: block;
font-size: 14px;
color: #ffffff;
width: 270px;
height: 60px;
background: url("../images/bd2.png") no-repeat left center/auto 60px;
text-align: center;
line-height: 60px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
} .container .left-nav li:hover p {
opacity: 0;
} .container .left-nav li:hover a {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>
</head> <body>
<div class="container">
<div class="header">
<div class="right" style="z-index: 99999;">
<!-- <div> -->
<a href="/index" color="#fff" target="_blank">
<span>控制台</span>
</a>
<!-- </div> -->
<a href="/logout">退出</a>
</div>
</div>
<div class="headWord">
<p>智慧园区统一工作站</p>
</div>
<div class="top">
<div class="left">
<button class="arrow-pre previous-button"></button>
<div class="scene">
<div class="carousel">
<div class="carousel__cell" data-index="0"><img src="http://61.174.54.120:9000/static/home/images/img1.png" alt=""></div>
<div class="carousel__cell" data-index="1"><img src="http://61.174.54.120:9000/static/home/images/img2.png" alt=""></div>
<div class="carousel__cell" data-index="2"><img src="http://61.174.54.120:9000/static/home/images/img3.png" alt=""></div>
<div class="carousel__cell" data-index="3"><img src="http://61.174.54.120:9000/static/home/images/img4.png" alt=""></div>
<div class="carousel__cell" data-index="4"><img src="http://61.174.54.120:9000/static/home/images/img5.png" alt=""></div>
<div class="carousel__cell" data-index="5"><img src="http://61.174.54.120:9000/static/home/images/img6.png" alt=""></div>
</div>
</div>
<button class="arrow-next next-button"></button>
<!-- <div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div> -->
</div>
<div class="right">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h4>智慧管控平台</h4>
<div><span class="type-1">管理中枢</span></div>
<p>集成园区内的信息化智能管控设备，用一张图对园区进行综合管理，并打通其他应用系统，进行应急情况系统派单处理</p>
<a href="http://115.236.99.184:9090/server/check" target="_blank">立即进入</a>
</div>
<div class="swiper-slide">
<h4>智慧党建</h4>
<div><span class="type-1">管理中枢</span></div>
<p>通过信息化手段，加强以园区为单位的基层党建建设，促进园区内中小企业党组织建设从而对企业健康发展起到促进作用</p>
<a href="http://61.174.54.120:9000/party/home/index" target="_blank">立即进入</a>
</div>
<div class="swiper-slide">
<h4>智慧物业</h4>
<div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
<p>智慧物业管理系统，结合物联网+园区智慧物业服务，帮助园区构建线上线下结合的物业服务体系</p>
<!-- <a href="http://115.236.99.184:8001/zhplat/login?ticket=59e711d152de7bec7304a8c2ecaf9f0f" target="_blank">立即进入</a> -->
<a href="http://61.174.54.120:9000/property/home/index" target="_blank">立即进入</a>
</div>
<div class="swiper-slide">
<h4>新媒体</h4>
<div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
<p>新媒体运营系统，通过“一端输入，多端展示”的方式，实现大屏、PC、移动设备多端全方位覆盖，打造园区宣传与形象展示金名片</p>
<a href="http://61.174.54.120:9000/newmedia/index" target="_blank">立即进入</a>
</div>
<div class="swiper-slide">
<h4>企业服务</h4>
<div><span class="type-3">应用平台</span></div>
<p>企业服务平台引入优质的第三方服务提供商，对服务提供商的服务进行整合，并在园区方的监管下给园区内企业提供各类服务对接</p>
<a href="">立即进入</a>
</div>
<div class="swiper-slide">
<h4>数据驾驶舱</h4>
<div><span class="type-3">应用平台</span></div>
<p>为小微园区管理提供一揽子的服务，对内管理包含运行概况，智慧物业，园区经济，园区党建，综合管控等内容</p>
<!-- <a href="http://datav.aliyun.com/share/df3993679dba4d9ea39373933f519433" target="_blank">立即进入</a> -->
<a href="http://61.174.54.120:9000/dist/#/dashboard?userId=27" target="_blank">立即进入</a>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="left">
<h4>管理中枢</h4>
<ul>
<li class="active"><i></i>
<p>智慧管控平台</p>
</li>
<li><i></i>
<p>智慧党建</p>
</li>
<li><i></i>
<p>智慧物业</p>
</li>
<li><i></i>
<p>新媒体</p>
</li>
</ul>
</div>
<div class="right">
<h4>应用平台</h4>
<ul>
<li><i></i>
<p>企业服务</p>
</li>
<li><i></i>
<p>数据驾驶舱</p>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/swiper.min.js"></script>
<script type="text/javascript">
(function() {
var _max = 6
var _timer = null
// 底部选中
$('.bottom ul').on('click', 'li', function() {
var index = $(this).index();
if ($(this).parent().parent().hasClass('right')) {
index += 4;
}
$('.bottom ul li').removeClass('active');
$(this).addClass('active');
if ($(this).parent().parent().hasClass('right')) {
$('.bottom').addClass('goright')
} else {
$('.bottom').removeClass('goright')
}
// 改变滚动图片-3D
// changeActive(index);
selectedIndex = index
rotateCarousel();
//轮播切换
swiper.slideTo(index, 600, false); //(index,speed,callBack)
});
// swiper初始化
var swiper = new Swiper('.swiper-container', {
allowTouchMove: false,
preventClicks: false
});
// 切换
function changeActive(index) {
swiper.slideTo(index, 600, false);
//触发底部点击事件
$('.bottom li').eq(index).click();
// $('.photo-cube__wrapper input').eq(0).click()
};
//3D旋转方法
var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel__cell');
var cellCount = 6;
var selectedIndex = 0;
var activeIndex = 0;
var cellWidth = carousel.offsetWidth;
var cellHeight = carousel.offsetHeight;
var isHorizontal = false;
var rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
var radius, theta; function rotateCarousel() {
var angle = theta * selectedIndex * -1;
carousel.style.transform = 'translateZ(' + -radius + 'px) ' +
rotateFn + '(' + angle + 'deg)';
}
//左右切换
var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener('click', function() {
selectedIndex--;
if (activeIndex === 0) {
activeIndex = cellCount - 1;
} else {
activeIndex--
}
var index = $('.carousel__cell').eq(activeIndex).data('index')
changeActive(index)
rotateCarousel();
});
var nextButton = document.querySelector('.next-button');
nextButton.addEventListener('click', function() {
selectedIndex++;
if (activeIndex === (cellCount - 1)) {
activeIndex = 0
} else {
activeIndex++
}
var index = $('.carousel__cell').eq(activeIndex).data('index')
changeActive(index)
rotateCarousel();
}); function changeCarousel() {
theta = 360 / cellCount;
var cellSize = isHorizontal ? cellWidth : cellHeight;
radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
if (i < cellCount) {
// visible cell
cell.style.opacity = 1;
var cellAngle = theta * i;
cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
} else {
// hidden cell
cell.style.opacity = 0;
cell.style.transform = 'none';
}
}
rotateCarousel();
};
// set initials
changeCarousel();
})()
</script>
</body> </html>
js 3D旋转效果的更多相关文章
- three.js 3D 动画场景
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.使用它它能让 WebGL 变得更加简单. 下面用Three.js渲染一个物体360 ...
- Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...
- css3 3D旋转效果
css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...
- 排名前10的H5、Js 3D游戏引擎和框架
由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...
- three.js 3d三维网页代码加密的实现方法
http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...
- 好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
- 用js写的比较简单3D旋转效果
HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 基于CSS3的3D旋转效果
自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文 ...
- 实现3D旋转效果的方法
Android中有一种旋转效果,是将一个图片进行360度的旋转. Matrix的作用是对平面上的View进行缩放.平移.旋转,每一种操作都配了setXXX.preXXX.postXXX三个函数. Ca ...
随机推荐
- ES6--浅析Promise内部结构
首发地址:sau交流学习社区 一.前言 什么是promise?promsie的核心是什么?promise如何解决回调地狱的?等问题 1.什么是promise?promise是表示异步操作的最终结果:可 ...
- 对SVN的落地与实践总结
现今最为流行的Git是管理很几套很成熟的分支管理策略.而SVN确实也有,但结合现公司的实际场景还是做了些调整和变动. 一.分支命名规则 所有分支命名采用小写字母 + 数字 + 特殊符号 组成 项目分支 ...
- Keepalived部署与配置详解
Keepalive详解 工作原理 Keepalived本质就是为ipvs服务的,它也不需要共享存储.IPVS其实就是一些规则,Keepalived主要的任务就是去调用ipvsadm命令,来生成规则,并 ...
- Python：轻量级 ORM 框架 peewee 用法详解（二）——增删改查
说明:peewee 中有很多方法是延时执行的,需要调用 execute() 方法使其执行.下文中不再特意说明这个问题,大家看代码. 本文中代码样例所使用的 Person 模型如下: class Per ...
- win10安装gitLab
从控制面板选择hyper-V进行安装 1.打开控制面板选择程序=>选择启用或关闭windows功能=>选择Hyper-v 安装ubuntu 1.下载ubuntu系统(本次安装为18.04. ...
- Gradle入门到实战(二) — ImageOptimization安卓图片转换压缩插件
上一篇我们了解了Gradle的各个方面,本篇介绍一款安卓图片优化转换插件,目前已在项目中使用,可一键批量转换压缩图片,webp转换与png/jpg压缩就是那么简单 GitHub项目地址:ImageOp ...
- C#简单继承示例详解——快速入门
在面向对象当中继承是非常重要的,也是面向对象的三大特性之一(继承.封装.多态),今天我们来揭开他的神秘面纱. 话不多说,我们上菜. using System; using System.Collect ...
- 阿里云或本地部署服务器（一）---nginx本地和服务器代理
具体步骤: 1.nginx下载 2.在G:\nginx-1.15.8\conf/nginx.conf改三处路径:nginx.conf 文件中配置的路径和端口要映射到vue项目工程 a.改 映射端口: ...
- python从学渣到学沫的半月天
今天又要引进一个新的知识点了,就是模块,可以直接引用的一个东西,从实用性来说很强大,不过还是需要记住模块的类型啊,如何应用还是需要学习和了解的.其中模块是分三种的,一种内置模块python内部提供的功 ...
- 跨域405(Method Not Allowed)问题
zepot post没有问题,用plupload上传出现了这个错误,options过不去.显示Response for preflight has invalid http status code 4 ...