帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery流程进度显示效果
jQuery流程进度显示效果
浏览:844次
-
评论:1次
-
发布时间:2018-01-18
Html
Css
Js
* { margin:0; padding:0; list-style:none; } .eStep-warp { width:600px; position:relative; margin:0 auto; margin-top:100px; } .eStep { display:flex; width:100%; } .eStep-item { flex:1; height:10px; background:#e4e4e4; position:relative; } i { text-decoration:none; font-style:normal; font-size:13px; } .eStep-progress { width:0; height:8px; position:absolute; left:0; top:0; background:#BD1D18; } /*进度条结束*/ .eStep--point-warp { position:absolute; left:0; top:0; width:100%; height:50px; } .eStep--point-item { position:absolute; top:-10px; display:block; height:50px; } .eStep--point { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:26px; height:26px; line-height:26px; color:#fff; text-align:center; position:absolute; top:0px; left:-2px; background:#e4e4e4; border:3px solid #e4e4e4; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } .eStep--point.done { width:30px; height:30px; background:#BD1D18; -webkit-transition:0.3s all ease; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -o-transition:0.3s all ease; transition:0.3s all ease; } .eStep--point.done:hover { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } .eStep--text { display:inline-block; width:100%; position:absolute; bottom:0; left:0; text-align:left; }
(function($) { $.fn.extend({ loadStep: function(params) { var stepArr = params.steps; var $this = $(this); var createStep = function(len) { var step = '
'; var $step = $(step); for (var i = 0; i < len; i++) { var stepItem = '
'; $step.append(stepItem); } $this.append($step); } var createPoint = function(stepArr) { var pointWarp = '
'; $this.append(pointWarp); var length = stepArr.length; var everyStepLength = $this.width() / (length - 1); var everyWidth = $this.width() / length; $(stepArr).each(function(index, item) { var itemHtml = '
' + '
' + (index + 1) + '
' + '
' + item.text + '
' + '
'; var $itemHtml = $(itemHtml); $itemHtml.css({ 'left': index * everyStepLength + 'px', width: everyWidth + 'px' }); $('.eStep--point-warp').append($itemHtml); }) } var createProgress = function() { var sProgress = '
'; $this.append(sProgress); } createStep(stepArr.length - 1); createProgress(); createPoint(stepArr); }, setStep: function(step) { var setPoint = function() { var $stepPointItem = $('.eStep--point-item'); for (var j = 0; j < $stepPointItem.length; j++) { var $point = $stepPointItem.eq(j).find('.eStep--point'); if (j <= step) { $point.addClass('done'); } } } setPoint(); var $this = $(this); var setProgress = function() { var $progress = $this.find('.eStep-progress'); var totalWidth = $this.width(); var allLength = $this.find('.eStep-item').length; var everyProgressLength = totalWidth / allLength; if (step > allLength) { step = allLength; } $progress.animate({ width: everyProgressLength * step }); //$progress.width(everyProgressLength*step); } setProgress(); } }) })(jQuery) $(function() { $('#step1').loadStep({ steps: [{ text: '申请' }, { text: '审计' }, { text: '线下审批' }, { text: '授权' }, { text: '完成' }] }); $('#step1').setStep(3); })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.8.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery流程进度显示效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:常用于pc端显示订单、审批流程进度
$('#step1').setStep(n); 可以将步骤跳到第几步
jQuery实现无缝滚动轮播图
很酷的翻纸文字效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2018年01月19日
很方便感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
844
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值