使用jquery怎么实现一个步骤进度轴插件

2023-06-15 02:06:21 121人浏览八月长安

摘要

使用Jquery怎么实现一个步骤进度轴插件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。代码部分*{margin: 0;padding: 0;}#div

使用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是什么

jquery是一个简洁而快速的javascript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、ajax交互和动画，以便快速开发网站。

关于使用jquery怎么实现一个步骤进度轴插件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网精选频道了解更多相关知识。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 使用jquery怎么实现一个步骤进度轴插件

本文链接: https://www.lsjlt.com/news/277009.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341