jquery滚动固定插件在哪(jquery 步骤进度轴插件的实现代码)
类别:编程学习 浏览量:213
时间:2022-03-29 15:35:15 jquery滚动固定插件在哪
jquery 步骤进度轴插件的实现代码每天一个jquery插件-步骤进度轴 步骤进度轴
很多工具型的网站入门教程或者注册账号走流程的时候会有这个结构存在,所以做了一个来尝试一下,回调动作也能用吧
效果如下
代码部分
*{ margin: 0; padding: 0; } #li{ 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> <li id="li"> </li> <li id="box"> <li class="box" id="box1" style="background-color: #1abc9c;">步骤1</li> <li class="box" id="box2" style="background-color: #3498db;">步骤2</li> <li class="box" id="box3" style="background-color: #f1c40f;">步骤3</li> <li class="box" id="box4" style="background-color: #e74c3c;">步骤4</li> <li class="box" id="box5" style="background-color: #9b59b6;">步骤5</li> </li> </body> </html> <script> $(function(){ $("#li").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 =$("<li class='tbar'></li>"); var $bar =$("<li class='bar'></li>"); $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 = $("<li class='dot' data-index='"+index+"'><li class='txt'>"+item.name+"</li></li>"); $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步骤进度轴的资料请关注开心学习网其它相关文章!
您可能感兴趣
- Jquery中parent()和parents()
- jquery中serialize方法对空格的处理
- jquery滚动固定插件在哪(jquery 步骤进度轴插件的实现代码)
- jquery实现页面滚动时自动加载内容
- 2014-8-31
- 介绍几个jQuery实用函数
- Jquery中的offset()和position()的区别
- jQuery中height()、innerheight()、outerheight()的区别
- jQuery邮箱自动补全
- jQuery商品属性选择的实现
- jquery属性选择器
- jquery ajax的async使用
- jquery脚本检测密码强度
- 如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
- jQuery中noConflict()的用法
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
热门推荐
- css的position属性的属性值(浅谈CSS中的 object-fit 与 object-position的使用)
- python教程第126节(Python 学习教程之networkx)
- nginx django部署(uwsgi+nginx代理Django无法访问静态资源的解决)
- mysql 高效分页(MySQL 分页查询的优化技巧)
- docker怎么创建mysql服务(Docker部署MySQL8集群一主二从的实现步骤)
- .NET中低版本程序调用高版本DLL
- 织梦模板修改列表(手把手教你制作织梦自定义公告模板)
- css制作磨砂图片(CSS制作梦幻彩虹效果)
- android系统如何截屏(Android实现矩形区域截屏的方法)
- 如何使用HttpModule实现sql防注入