• 售前

  • 售后

热门帖子
入门百科

原生js实现滑块区间组件

[复制链接]
阿源285 显示全部楼层 发表于 2021-10-25 19:40:02 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现滑块区间组件的具体代码,供各人参考,具体内容如下
功能需求:

1、最小值为0,按照给定的最大值,天生区间范围;
2、拖动滑块移动时,体现相应的范围区间,滑块条体现对应的状态;
3、点击时,使近来的滑块移动到鼠标点击的位置。

默认效果:


当拖动滑块时,体现如下:

分析:

      
  • 首先布局要写好,一共有4个元素,两个滑块和两个滑块条。布局时要考虑到后期对滑块和滑块条举行变乱监听,尽大概少地出现变乱冒泡;  
  • 拖动滑块时,要区分是左边的滑块照旧右边的滑块;  
  • 鼠标的click变乱和mousedown变乱要兼容好,这里同一使用的是mousedown变乱;  
  • 要确定好左右滑块的最大最小 left 值;  
  • 滑块条的体现就很简单了,宽度是左、右滑块的定位差值,left值是左滑块的left值;  
  • 由于使用了变乱委托机制,而在mousemove和mouseup变乱中,无法判断当前操作的是哪一个滑块,所以要在鼠标按下时,将当前操作的对象传到mousemove变乱中;
下面附上代码:
html布局,实例化滑块,可以设置当前滑块的区间范围:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>slide</title>
  7. </head>
  8. <body>
  9. <script type="module">
  10. import Slide from "./js/Slide.js";
  11. init();
  12. function init(){
  13.   //参数为最大范围,不传的话默认是4000
  14.   let slide=new Slide(4200);
  15.   slide.appendTo("body");
  16. }
  17. </script>
  18. </body>
  19. </html>
复制代码
Slide.js文件:完成创建滑块,拖动滑块,点击滑块的功能。
  1. import Utils from "./Utils.js";
  2. export default class Slide{
  3. static styleCss=false;
  4. //最小范围
  5. minNum=0;
  6. //最大范围
  7. maxNum;
  8. //左边按钮的left值
  9. leftBtnLeft=0;
  10. //右边按钮的left值
  11. rightBtnLeft=238;
  12. constructor(_max=4000){
  13. //最大值默认为4000
  14. this.maxNum=_max;
  15. this.elem=this.createElem();
  16. }
  17. createElem(){
  18. if(this.elem) return this.elem;
  19. //创建最外层容器
  20. let div=Utils.createE("div");
  21. div.className="slideContainer";
  22. div.innerHTML=`<p class="priceTxt">价格<span id="rangeText">¥${this.minNum}-${this.maxNum}</span></p>
  23. <div class="rangeContainer" id="rangeContainer">
  24.   <div class="bgRange" id="bgRange"></div>
  25.   <div class="priceRange" id="priceRange"></div>
  26.   <span id="leftBtn" class="leftBtn"></span>
  27.   <span id="rightBtn" class="rightBtn"></span>
  28. </div>`;
  29. Utils.getIdElem(div,this);
  30. //设置样式
  31. Slide.setStyles();
  32. //给父元素监听mousedown事件
  33. this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e))
  34. return div;
  35. }
  36. appendTo(parent){
  37. Utils.appendTo(this.elem,parent);
  38. }
  39. mouseHandler(e){
  40. //注意:getBoundingClientRect()返回的结果中,width height 都是包含border的
  41. let rect=this.rangeContainer.getBoundingClientRect();
  42. switch (e.type) {
  43.   case "mousedown":
  44.   //取消鼠标快速拖动的默认事件
  45.   e.preventDefault();
  46.   this.x = e.offsetX;
  47.   this.btnType=e.target.id;
  48.   //如果点击的是背景条,执行rangeClick函数
  49.   if(/Range/.test(this.btnType)){
  50.    e.stopPropagation();
  51.    //点击函数
  52.    this.rangeClick(e);
  53.    return;
  54.   }
  55.   //如果点击的是按钮,监听document鼠标移动事件
  56.   this.mouseHandlers=e=>this.mouseHandler(e);
  57.   document.addEventListener("mousemove", this.mouseHandlers);
  58.   document.addEventListener("mouseup", this.mouseHandlers);
  59.   break;
  60.   case "mousemove":
  61.   let x = e.clientX - rect.x - this.x;
  62.   //获取左右按钮的left值
  63.   this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
  64.   this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
  65.   if (this.btnType === "leftBtn") {
  66.    //确定左边按钮的取值范围
  67.    if (x < 0) x = 0;
  68.    if (x > this.rightBtnLeft) x = this.rightBtnLeft;
  69.    this.leftBtn.style.left = x + "px";
  70.   } else if (this.btnType === "rightBtn") {
  71.    //确定右边按钮的取值范围,减去1px边框
  72.    if (x < this.leftBtnLeft) x = this.leftBtnLeft;
  73.    if (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2;
  74.    this.rightBtn.style.left = x + "px";
  75.   }
  76.   //文字范围显示
  77.   this.changeRangeText();
  78.   break;
  79.   case "mouseup":
  80.   //移动事件监听
  81.   document.removeEventListener("mousemove", this.mouseHandlers);
  82.   document.removeEventListener("mouseup", this.mouseHandlers);
  83.   break;
  84. }
  85. }
  86. rangeClick(e){
  87. //计算出鼠标点击位置的值
  88. let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2;
  89. //判断,如果当前点击的位置是在左边按钮的左侧、或者当左右按钮重叠时,点击的位置在按钮左侧,让左边按钮移动到鼠标点击的位置
  90. if(Math.abs(click_X-this.leftBtnLeft)<Math.abs(click_X-this.rightBtnLeft) ||
  91. (this.leftBtnLeft===this.rightBtnLeft && click_X<this.leftBtnLeft)) this.leftBtn.style.left=click_X+"px";
  92. //否则,让右边按钮移动到鼠标点击的位置
  93. else this.rightBtn.style.left=click_X+"px";
  94. //获取移动后的左右按钮的left值
  95. this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
  96. this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
  97. //文字范围显示
  98. this.changeRangeText();
  99. }
  100. changeRangeText(){
  101. //计算出最小范围与最大范围的值,四舍五入
  102. let minTxt=Math.round(this.leftBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
  103. let maxTxt=Math.round(this.rightBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
  104. this.rangeText.innerText=`¥${minTxt}-${maxTxt}`;
  105. //滑块颜色的改变
  106. this.changeRangeSlide();
  107. }
  108. changeRangeSlide(){
  109. //滑块宽度等于左右按钮间的距离
  110. this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px";
  111. //滑块的left值等于左边按钮的left值
  112. this.priceRange.style.left=this.leftBtnLeft+"px";
  113. }
  114. static setStyles(){
  115. if(Slide.styleCss) return;
  116. Slide.styleCss=true;
  117. Utils.insertCss(".slideContainer",{
  118.   width:"260px",
  119.   height:"70px",
  120.   margin:"50px"
  121. })
  122. Utils.insertCss(".priceTxt",{
  123.   fontSize:"14px",
  124.   color:"#666",
  125.   marginBottom:"20px"
  126. })
  127. Utils.insertCss(".priceTxt span",{
  128.   float:"right"
  129. })
  130. Utils.insertCss(".rangeContainer",{
  131.   width:"260px",
  132.   height:"20px",
  133.   position:"relative",
  134. })
  135. Utils.insertCss(".bgRange",{
  136.   width:"240px",
  137.   height:"3px",
  138.   backgroundColor:"#dedede",
  139.   position:"absolute",
  140.   left:"10px",
  141.   top:"9px"
  142. })
  143. Utils.insertCss(".priceRange",{
  144.   width:"240px",
  145.   height:"3px",
  146.   background:"#ffa800",
  147.   position:"absolute",
  148.   left:"10px",
  149.   top:"9px"
  150. })
  151. Utils.insertCss(".rangeContainer span",{
  152.   width: "20px",
  153.   height: "20px",
  154.   borderRadius:"50%",
  155.   border:"1px solid #ccc",
  156.   background:"#fff",
  157.   position:"absolute",
  158.   top:"0px",
  159.   boxShadow:"2px 2px 2px #333"
  160. })
  161. Utils.insertCss(".leftBtn",{
  162.   left:"0px"
  163. })
  164. Utils.insertCss(".rightBtn",{
  165.   left:"238px"
  166. })
  167. }
  168. }
复制代码
Utils.js文件:是一个工具包文件。
  1. export default class Utils{
  2. static createE(elem,style,prep){
  3. elem=document.createElement(elem);
  4. if(style) for(let prop in style) elem.style[prop]=style[prop];
  5. if(prep) for(let prop in prep) elem[prop]=prep[prop];
  6. return elem;
  7. }
  8. static appendTo(elem,parent){
  9. if (parent.constructor === String) parent = document.querySelector(parent);
  10. parent.appendChild(elem);
  11. }
  12. static randomNum(min,max){
  13. return Math.floor(Math.random*(max-min)+min);
  14. }
  15. static randomColor(alpha){
  16. alpha=alpha||Math.random().toFixed(1);
  17. if(isNaN(alpha)) alpha=1;
  18. if(alpha>1) alpha=1;
  19. if(alpha<0) alpha=0;
  20. let col="rgba(";
  21. for(let i=0;i<3;i++){
  22.   col+=Utils.randomNum(0,256)+",";
  23. }
  24. col+=alpha+")";
  25. return col;
  26. }
  27. static insertCss(select,styles){
  28. if(document.styleSheets.length===0){
  29.   let styleS=Utils.createE("style");
  30.   Utils.appendTo(styleS,document.head);
  31. }
  32. let styleSheet=document.styleSheets[document.styleSheets.length-1];
  33. let str=select+"{";
  34. for(var prop in styles){
  35.   str+=prop.replace(/[A-Z]/g,function(item){
  36.   return "-"+item.toLocaleLowerCase();
  37.   })+":"+styles[prop]+";";
  38. }
  39. str+="}"
  40. styleSheet.insertRule(str,styleSheet.cssRules.length);
  41. }
  42. static getIdElem(elem,obj){
  43. if(elem.id) obj[elem.id]=elem;
  44. if(elem.children.length===0) return obj;
  45. for(let i=0;i<elem.children.length;i++){
  46.   Utils.getIdElem(elem.children[i],obj);
  47. }
  48. }
  49. }
复制代码
以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作