HTML+CSS3 纯代码实现转盘效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="/Scripts/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="">
<style>
*{
padding:0;
margin:0;
font: 24px/24px "Microsoft Yahei";
color:white;
}
body{
background:#202020;
}
.main{
width: 1520px;
height:900px;
background:#06192A;
margin:0 auto;
border:2px solid white;
}
.main header{
height: 150px;
border-bottom:2px solid #637382;
}
.main header h1{
text-align:center;
font-weight:bolder;
position: relative;
bottom:0;
padding-top: 104px;
}
.main section{
width:1350px;
/*border-bottom:2px solid #637382;*/
margin:0 auto;
/*padding-top:50px;
padding-left:98.5px;*/ display:inline-block;
padding-top: 50px;
padding-left: 170px;
} .main section .round{
width:300px;
height:300px;
position: relative;
/*background:gray;*/
border-radius:50%; margin-right: 150px;
margin-bottom: 30px;
float:left;
} .main section .round ul{
list-style: none;
margin: 0;
padding: 0;
} .main section .round ul.mark li{
width:2px;
height:18px;
display:block;
background:white;
position: absolute;
top:50%;
left:50%;
} .main section .round ul.mark li:nth-child(odd){
height:26px;
top: calc(50% - 4px);
} .digits::before{
width: 34px;
height: 34px;
position: absolute;
border-radius:50%;
top:calc(50% - 8px);
left:calc(50% - 17px);
content:"";
background:#003951;
} .digits::after{
position: absolute;
top: 181px;
left: 137px;
content:"MPH";
font-size:12px;
font-weight:lighter;
opacity:0.5;
} .main section .round ul.digits li{
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
line-height: 20px;
text-align: center;
font-weight: lighter;
} .main section .round ul.digits li:nth-child(1){
transform: translate(-93px, 35px);
}
.main section .round ul.digits li:nth-child(2){
transform: translate(-95px, -25px);
}
.main section .round ul.digits li:nth-child(3){
transform: translate(-65px, -70px);
}
.main section .round ul.digits li:nth-child(4){
transform: translate(-18px, -90px);
}
.main section .round ul.digits li:nth-child(5){
transform: translate(45px, -70px);
}
.main section .round ul.digits li:nth-child(6){
transform: translate(60px, -25px);
}
.main section .round ul.digits li:nth-child(7){
transform: translate(68px, 35px);
} .main section .round .hand{
width: .2em;
height: .2em;
background: #c00;
border-radius: 50%;
position: absolute;
top: 157px;
left: 148px; -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: rgba(0, 0, 0, .8) 0 0 .2em;
} .main section .round .hand:before{
content: "";
width: .2em;
height: 128px;
border-radius: .2em .2em 0 0/10em 10em 0 0;
background: #c00;
position: absolute;
top: -127px;
left: .1em;
margin: 0 0 -2em -.1em;
} .main section .round .digital{
position: absolute;
top: 225px;
left: 76px;
} .main section .round .digital input,.main section .round .digital ul{
float:left;
} .main section .round .digital ul{
width:20px;
height: 30px;
color: #ddd;
font-family: Consolas, monaco, monospace;
background:#000009;
margin:0 1px !important;
text-align:center;
overflow:hidden;
position: relative;
} .main section .round .digital ul li{
width:18px;
height:26px;
margin-top:2px;
background:#1A2730;
/*font-weight:lighter;*/
position: relative;
overflow:hidden;
margin-left:1px;
} .main section .round .digital ul.mph,.main section .round .digital ul.mph li{
background:none;
cursor: pointer;
overflow:visible;
} .main section .round .digital ul.mph li{
height: 30px;
margin-top:0;
} .main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{
display:block;
position: relative;
}
.main section .round .digital ul.mph b{
width:16px;
height:16px;
border-radius:8px;
background:white;
top:-2px;
margin-left:2px;
} .main section .round .digital ul.mph b.selected:before{
background:red;
width:12px;
height: 12px;
content:"";
border-radius:6px;
top:2px;
left:2px;
} .main section .round .digital ul.mph span{
width:20px;
height:15px;
font-size:12px;
top:-6px;
} .main section .round .digital ul.mph:first-child{
margin-right: 10px !important;
} .main section .round .digital ul.mph:last-child{
margin-left: 10px !important;
} .main section .round p{
position: absolute;
bottom:10px;
text-align:center;
width: 100%;
font-size:21px;
} .main section .round .digital ul li span {
width: 20px;
height: 26px;
display: block;
position: relative;
top: -234px;
} .main section .round .digital ul.d4/*:nth-child(4)*/ li{
/* -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;*/
} #r1 .digital ul.d4 li{
top: -252px;
} #r2 .digital ul.d4 li{
top: -168px;
} #r3 .digital ul.d4 li{
top: -140px;
} #r4 .digital ul.d3 li{
top: -84px;
} #r4 .digital ul.d4 li{
top: -112px;
} #r5 .digital ul.d4 li{
top: -112px;
} #r6 .digital ul.d4 li{
top: -224px;
}
</style>
</head>
<body>
<div class="main">
<header>
<h1>心血管医用气体</h1>
</header>
<section>
<div class="round" id="r1" data-value="0.42">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氧气区域管线压力</p>
</div>
<div class="round" id="r2" data-value="0.43">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>压缩空气区域管线压力</p>
</div>
<div class="round" id="r3" data-value="0.44">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>CO2区域管线压力</p>
</div>
<div class="round" id="r4" data-value="0066">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>30</li>
<li>40</li>
<li>50</li>
<li style="transform:translate(-10px, -90px);">60</li>
<li>70</li>
<li style="transform:translate(75px, -25px);">80</li>
<li style="transform:translate(72px, 35px);">90</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul class="d3">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>真空区域管线压力</p>
</div>
<div class="round" id="r5" data-value="0.45">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>笑气区域管线压力</p>
</div>
<div class="round" id="r6" data-value="0.51">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>5</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氮气区域管线压力</p>
</div>
</section>
</div>
</body>
<script>
$(".round").each(function(){
var deg = -110;
$(this).find("ul.mark li").each(function(){
var ty = "-120px";
if($(this).index() % 2 == 0){
ty = "-115px";
} $(this).css("transform","rotate("+deg+"deg) translateY("+ty+")");
deg += 220 / 24;
});
}); $(".digital").find("ul:not(.mph):last").click(function(){ }); function getDeg(num){
return -110 + 220 / 24 * (num - 1);
} var dig = 28;
//---------r1---------
var r1_deg = getDeg(9);
$("#r1").find(".hand")
.css("transform","rotate("+r1_deg+"deg)"); var r1_status = false; setTimeout(function(){
var r1 = $("#r1"); r1_status = null; var new_r1_deg = getDeg(13) r1.find(".hand").css("transform","rotate("+new_r1_deg+"deg)");
var num = r1.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r1.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r1.find(".d4 li").animate({
top: parseInt(num) + 28 * 5 + "px"
},1500);
}, 3000); setTimeout(function(){
r1_status = true;
},5000); setInterval(function(){
if(r1_status == null){return;} var r1 = $("#r1").find(".hand")[0]; var r1_deg = r1.style.cssText; var n = r1_deg.substring(18,r1_deg.length - 5); n = r1_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r1.style.cssText = "transform:rotate("+n+"deg)"; r1_status = !r1_status;
},500); //---------r2---------
$("#r2").find(".hand")
.css("transform","rotate(-12.5deg)"); var r2_status = false; setTimeout(function(){
var r2 = $("#r2"); r2_status = null; var new_r2_deg = getDeg(9) r2.find(".hand").css("transform","rotate("+new_r2_deg+"deg)");
var num = r2.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r2.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r2.find(".d4 li").animate({
top: parseInt(num) - 28 * 3 + "px"
},1500);
}, 5000); setTimeout(function(){
r2_status = true;
},6000); setInterval(function(){
if(r2_status == null){return;} var r2 = $("#r2").find(".hand")[0]; var r2_deg = r2.style.cssText; var n = r2_deg.substring(18,r2_deg.length - 5); n = r2_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r2.style.cssText = "transform:rotate("+n+"deg)"; r2_status = !r2_status;
},500); //---------r3---------
$("#r3").find(".hand")
.css("transform","rotate(-3.9deg)"); var r3_status = false;
//*
setInterval(function(){
if(r3_status == null){return;} var r3 = $("#r3").find(".hand")[0]; var r3_deg = r3.style.cssText; var n = r3_deg.substring(18,r3_deg.length - 5); n = r3_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r3.style.cssText = "transform:rotate("+n+"deg)"; r3_status = !r3_status;
},500);//*/ //---------r4---------
var r4_deg = getDeg(15);
$("#r4").find(".hand")
.css("transform","rotate("+r4_deg+"deg)"); var r4_status = true; setTimeout(function(){
var r4 = $("#r4"); r4_status = null; var new_r4_deg = getDeg(17) r4.find(".hand").css("transform","rotate("+new_r4_deg+"deg)"); var num = r4.find(".d4 li").css("top");
num = num.substring(0,num.length - 2); //r4.find(".d4 li").css("top",parseInt(num) + 28 * i + "px"); r4.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1000, function() {
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2); r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px"); r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px"); r4_status = false;
});
}, 7000);
/*
setTimeout(function(){
var r4 = $("#r4");
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2); r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px"); r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px");
}, 6000);
*/
//*
setInterval(function(){
if(r4_status == null){return;} var r4 = $("#r4").find(".hand")[0]; var r4_deg = r4.style.cssText; var n = r4_deg.substring(18,r4_deg.length - 5); n = r4_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r4.style.cssText = "transform:rotate("+n+"deg)"; r4_status = !r4_status;
},500);//*/ var r5_deg = getDeg(13);
$("#r5").find(".hand")
.css("transform","rotate("+r5_deg+"deg)");
var r5_status = false;
//*
setInterval(function(){
if(r5_status == null){return;} var r5 = $("#r5").find(".hand")[0]; var r5_deg = r5.style.cssText; var n = r5_deg.substring(18,r5_deg.length - 5); n = r5_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r5.style.cssText = "transform:rotate("+n+"deg)"; r5_status = !r5_status;
},500);//*/ var r6_deg = getDeg(17);
$("#r6").find(".hand")
.css("transform","rotate(42.666667deg)");
var r6_status = false; setTimeout(function(){
var r6 = $("#r6"); r6_status = null; var new_r6_deg = getDeg(21) r6.find(".hand").css("transform","rotate("+new_r6_deg+"deg)");
var num = r6.find(".d4 li").css("top"); num = num.substring(0,num.length - 2); //r6.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r6.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1500);
}, 9000); setTimeout(function(){
r6_status = true;
},10000);
//*
setInterval(function(){
if(r6_status == null){return;} var r6 = $("#r6").find(".hand")[0]; var r6_deg = r6.style.cssText; var n = r6_deg.substring(18,r6_deg.length - 5); n = r6_status ? parseFloat(n) + 2 : parseFloat(n) - 2; r6.style.cssText = "transform:rotate("+n+"deg)"; r6_status = !r6_status;
},500);//*/
</script>
</html>
HTML+CSS3 纯代码实现转盘效果的更多相关文章
- css3纯手写loading效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 心跳（纯代码制作心形，animation动画）
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 纯CSS3实现的动感菜单效果
1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...
- Android 纯代码加入点击效果
项目中非常多的Button, 同一时候配置非常多button切图,Selector是不是非常烦, 使用以下这个类,就能够直接为Button添加点击效果. 不用多个图片,不用Selector. 使用方法 ...
- AS3.0纯代码编写的两款loading效果
AS3.0纯代码编写的两款loading效果 效果一 效果二 代码很简单,实现的原理一样,只不过矩形用到了Matrix类,对注册点进行了调整,效果可用于视频播放器缓冲时的loading效果,下面看代码 ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
随机推荐
- 蓝桥杯 入门训练 Fibonacci数列
入门训练 Fibonacci数列 时间限制:1.0s 内存限制:256.0MB 问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. ...
- Linux 性能监控的18个命令行工具
对于系统和网络管理员来说每天监控和调试Linux系统的性能问题是一项繁重的工作.在IT领域作为一名Linux系统的管理员工作5年后,我逐渐 认识到监控和保持系统启动并运行是多么的不容易.基于此原因,我 ...
- [转]Oracle 操作字符串的函数
转至:http://yedward.net/?id=62 (1)oracle中实现截取字符串:substr substr(string, start_position, [length]) 其中,st ...
- Unity中2D和UGUI图集的理解与使用
图集 什么是图集? 在使用3D技术开发2D游戏或制作UI时(即使用GPU绘制),都会使用到图集,而使用CPU渲染的2D游戏和UI则不存在图集这个概念(比如Flash的原生显示列表),那么什么是图集呢? ...
- 定义文档兼容性，让IE按指定的版本解析我们的页面
作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺 ...
- Linux下升级python版本
转载自:http://lovebeyond.iteye.com/blog/1770476 CentOS下的Python版本一般都比较低,很多应用都需要升级python来完成.我装的centOS的默认的 ...
- 十，选择cfee编辑器并学会调试程序。以及结束语。
为什么推荐用cfree呢?因为我认为这个编辑器界面友好,用起来方便. 你也许会问,调试程序是什么? 那么下面思考几个问题:对于前面讲的分支结构和循环结构有点不懂怎么办?如果写的程序语法没有错误但是运算 ...
- Squid代理服务器&&搭建透明代理网关服务器
案例需求 ——公司选用RHEL5服务器作为网关,为了有效节省网络带宽.提高局域网访问Internet的速度,需要在网关服务器上搭建代理服务,并结合防火墙策略实现透明代理,以减少客户端的重复设置工作 需 ...
- Unix: How to Install BerkeleyDB From Source
http://www.masaokitamura.com/2010/07/23/unix-how-to-install-berkeleydb-from-source/ This documentati ...
- Hadoop on Mac with IntelliJ IDEA - 1 解决input path does not exist问题
本文讲述使用IntelliJ IDEA时遇到Hadoop提示input path does not exist(输入路径不存在)的解决过程. 环境:Mac OS X 10.9.5, IntelliJ ...