jquery实现一个步骤条效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现一个步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: white; } .btnext { background: blue; color: #fff; width: 100px; text-align: center; border-radius: 10px; height: 48px; line-height: 0px; position: relative; top: 60px; left: 70px; } ul,li { list-style: none; margin: 0; padding: 0 } .bar-box { position: relative; top: 11px; left: 10px } .bar-content { position: relative; z-index: 9999 } .bar-bg { width: 100%; height: 6px; background: #ddd; position: relative } .bar-color { width: 0%; height: 6px; background: #64bd2e; position: absolute; left: 0; top: 0 } .bar-circle-ul {}.bar-circle-ul li { float: left } .bar-circle-ul li div { width: 32px; height: 32px; text-align: center; line-height: 32px; display: inline-block; border-radius: 50%; background: #ddd; color: #252525; position: relative } .bar-circle-ul li div span { position: absolute; top: -33px; color: #ddd; left: -254%; width: 200px } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script> $.fn.extend({ "stepInit":function(option) { var arr = option.data; var stepNum = arr.length; var stepIndex = option.index; var content = "<div class=\"bar-content\">\n<ul class=\"bar-circle-ul\">\n</ul>\n</div>\n\n<div class=\"bar-box\">\n<div class=\"bar-bg\">\n<div class=\"bar-color\">\n</div>\n</div>\n</div>" $(this).append(content); var perc = 100/stepNum; $(this).attr({ 'style': 'margin-right:'+'-'+perc+'%' .........完整代码请登录后点击上方下载按钮下载查看
网友评论0