使用jquery怎么实现一个步骤进度轴插件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
代码部分
*{ margin: 0; padding: 0; } #div{ width: 90%; height: 50px; margin: 10px auto; display: flex; justify-content: center; align-items: center; } #box{ width: 90%; height: 100px; border: 1px solid lightgray; margin: 10px auto; display: flex; justify-content: center; align-items: center; position: relative; } .box{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: black; color: white; } .tbar{ width: 90%; height: 6px; border-radius: 5px; background-color: lightgray; display: flex; align-items: center; position: absolute; } .bar{ width: 100%; height: 50%; border-radius: 5px; background-color: #1abc9c; transition: all 0.2s linear; } .dot{ position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: lightgray; cursor: pointer; display: flex; justify-content: center; align-items: center; } .dot:hover{ transition: all 0.5s linear; background-color: #1abc9c; } .dot.check{ background-color: #1abc9c; } .dot .txt{ top: 100%; font-size: 12px; position: absolute; width: 100px; text-align: center; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>步骤进度轴</title> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bzjdz.js"></script> <link href="css/bzjdz.css" rel="external nofollow" rel="stylesheet" type="text/css" /> </head> <body> <div id="div"> </div> <div id="box"> <div class="box" id="box1" >步骤1</div> <div class="box" id="box2" >步骤2</div> <div class="box" id="box3" >步骤3</div> <div class="box" id="box4" >步骤4</div> <div class="box" id="box5" >步骤5</div> </div> </body> </html> <script> $(function(){ $("#div").timeline({ data:[ {name:'步骤1',id:'#box1',click:hide}, {name:'步骤2',id:'#box2',click:hide}, {name:'步骤3',id:'#box3',click:hide}, {name:'步骤4',id:'#box4',click:hide}, {name:'步骤5',id:'#box4',click:hide}, ] }) }) function hide(item){ $(".box").hide(); $(item.id).show(); } </script>
$.prototype.timeline =function(op){ console.log(op.data); var $that = $(this); var $tbar =$("<div class='tbar'></div>"); var $bar =$("<div class='bar'></div>"); $bar.appendTo($tbar) $tbar.appendTo($that); var length = op.data.length;//元素长度 var index = 0;//当前进行到哪个步骤 op.data.forEach((item,index)=>{ var per = getper(index,length) var $dot = $("<div class='dot' data-index='"+index+"'><div class='txt'>"+item.name+"</div></div>"); $dot.appendTo($tbar); $dot.css('left',"calc("+per+"% - 6px)") }) //点击事件 $that.find('.dot').click(function(){ index = parseInt($(this).attr('data-index')); //执行对应的方法 click(); }) click(); function click(){ //回调 var item = op.data[index]; item.click(item); //动画样式 var per = getper(index,length) $bar.css('width',per+'%') //按钮选中的控制 op.data.forEach((item,i)=>{ if(i<=index){ $tbar.find(".dot[data-index='"+i+"']").addClass('check'); }else{ $tbar.find(".dot[data-index='"+i+"']").removeClass('check'); } }) } function getper(i,l){ var temp = 0; if(i!=0&&i!=l-1){ temp = i/(l-1)*100//算出大概的距离 }else if(i==l-1){ temp = 100 } return temp; } }
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
关于使用jquery怎么实现一个步骤进度轴插件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。