jquery实现带提示进度条步骤条效果代码
代码语言:html
所属分类:进度条
代码描述:jquery实现带提示进度条步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> @charset "utf-8"; .starBox { margin: 100px auto; width: 630px; } .control_processSteps { display: flex; white-space: nowrap; } .processStep { display: inline-block; position: relative; flex-shrink: 1; flex-basis: 50%; margin-right: 0px; } .step_main { position: relative; white-space: normal; text-align: left; } /* 线条 */ .step_line { position: absolute; height: 4px; top: 10px; left: 0; right: 0; border-color: inherit; background-color: #c0c4cc; } .processStep:last-of-type .step_line { display: none; } .step_icon_inner { position: relative; z-index: 1; display: inline-flex; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid; border-radius: 50%; text-align: center; font-weight: 700; align-items: center; font-size: 14px; background: #fff; } .step_title { font-size: 16px; line-height: 38px; cursor: pointer; } .step_description { display: none; position: absolute; margin-top: -5px; font-size: 12px; line-height: 20px; font-weight: 400; background: #fff; box-shadow: 0px 4px 4px #ccc; border-radius: 5px; padding: 10px; z-index: 99; } .step_line_active { background-color: #409eff; } /* 已完结状态 */ .is_finish { color: #409eff; border-color: #409eff; } .is_process { color: #303133; border-color: #303133; } .is_wait { color: #c0c4cc; border-color: #c0c4cc; } .step_main:hover .step_title+.is_finish { display: inline-block; } </style> </head> <body> <div class="starBox"></div> <script type="text/javascript"> //步骤条控件 function StepContentFn(tag, stepContent, stat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0