有风的日子

[jquery]漂亮的互动进程

Luoshui邀请您加入WORDPRESS技术交流QQ群:31196817 → wordpress技术交流

先看效果:http://sandbox.runjs.cn/show/pph7f2cx

代码:

html:
<script id=”jquery_182″ type=”text/javascript” class=”library” src=”/js/sandbox/jquery/jquery-1.8.2.min.js”></script>
<div class=”inliner”></div>
<div class=”inlined”>
<div class=”progress-meter”>
<div class=”track”>
<span class=”progress”></span>
</div>
<ol class=”progress-points” data-current=”4″>
<li class=”progress-point” data-point=”1″>
<span class=”label”>需求</span>
</li>
<li class=”progress-point” data-point=”2″>
<span class=”label”>设计</span>
</li>
<li class=”progress-point” data-point=”3″>
<span class=”label”>开发</span>
</li>
<li class=”progress-point” data-point=”4″>
<span class=”label”>测试</span></li>
<li class=”progress-point” data-point=”5″>
<span class=”label”>发布</span>
</li>
</ol>
</div>
<div class=”controls”>
<button class=”trigger”>循环执行过程</button>
<p>点击每个阶段来模拟过程</p>
</div>
</div>
复制代码
css:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
font-size: 14px;
text-align: center;
}

.inliner {
height: 100%;
}

.inliner,
.inliner + .inlined {
display: inline-block;
vertical-align: middle;
}

.inlined {
width: 90%;
}

.progress-meter {
margin: 20px auto 40px;
padding: 40px;
}

.progress-meter {
counter-reset: point;
}
.progress-meter .progress-point:before {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
border-radius: 24px;
-webkit-box-shadow: 0 0 0 2px white;
-moz-box-shadow: 0 0 0 2px white;
box-shadow: 0 0 0 2px white;
content: “\2713”;
display: block;
width: 24px;
margin: 0 auto 12px;
border: 4px solid #aaaaaa;
text-align: center;
background-color: white;
color: white;
}
.progress-meter .track {
position: relative;
height: 4px;
background: #dddddd;
}
.progress-meter .progress {
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
display: block;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 4px;
background: red;
}
.progress-meter .progress-points {
position: relative;
margin: -14px 0 0;
padding: 0;
list-style: none;
}
.progress-meter .progress-points [data-point=’1′] {
left: 0%;
}
.progress-meter .progress-points [data-point=’2′] {
left: 25%;
}
.progress-meter .progress-points [data-point=’3′] {
left: 50%;
}
.progress-meter .progress-points [data-point=’4′] {
left: 75%;
}
.progress-meter .progress-points [data-point=’5′] {
left: 100%;
}
.progress-meter .progress-point {
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
position: absolute;
display: block;
width: 100px;
margin-left: -50px;
text-align: center;
cursor: pointer;
color: #999;
}
.progress-meter .progress-point.completed, .progress-meter .progress-point.active {
color: #777777;
}
.progress-meter .progress-point.completed:before {
border-color: #777777;
background-color: #777777;
}
.progress-meter .progress-point.active:before {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
border-color: #777777;
}
.progress-meter .progress-point .label:before {
counter-increment: point;
content: counter(point) “. “;
/* Display the counter */
}

.controls {
text-align: center;
font-size: 12px;
}

.trigger {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 6px 8px;
border: none;
font: 14px inherit;
text-shadow: 0px 1px 1px rgba(251, 251, 251, 0.75);
color: #626262;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbbbbb), color-stop(100%, #959595));
background-image: -webkit-linear-gradient(#bbbbbb, #959595);
background-image: -moz-linear-gradient(#bbbbbb, #959595);
background-image: -o-linear-gradient(#bbbbbb, #959595);
background-image: linear-gradient(#bbbbbb, #959595);
}
复制代码
js:
(function() {
var $point_arr, $points, $progress, $trigger, activate, active, max, tracker, val;

$trigger = $(‘.trigger’).first();

$points = $(‘.progress-points’).first();

$point_arr = $(‘[data-point]’);

$progress = $(‘.progress’).first();

val = parseInt($points.data(‘current’)) – 1;

max = $point_arr.length – 1;

tracker = active = 0;

activate = function(index) {
if (index !== active) {
active = index;
$point_arr.removeClass(‘completed active’);
$point_arr.slice(0, index).addClass(‘completed’);
$point_arr.eq(active).addClass(‘active’);
return $progress.css(‘width’, (index / max * 100) + “%”);
}
};

$points.on(‘click’, ‘li’, function(event) {
var _index;
_index = $point_arr.index(this);
tracker = _index === 0 ? 1 : _index === val ? 0 : tracker;
return activate(_index);
});

$trigger.on(‘click’, function() {
return activate(tracker++ % 2 === 0 ? 0 : val);
});

setTimeout((function() {
return activate(val);
}), 1000);

}).call(this);
复制代码

转载请注明:有风的日子 > 前端设计 > [jquery]漂亮的互动进程

评论 (3) 分享

评论 3