插件开发-滑条(slide)开发

自己一直很喜欢开发组件，只是OPP学的不是很精，自己在项目中用别人的框架进行项目开发，难免受制于人，也许这就是个人实际项目需求和框架提供的多少有点不符，引导我自己尝试开发一些自己常用的组件，话不多说，直接贴代码。

HTML代码部分:

 <body>

     <div id="slide">

         <div class="sliderbar-wrap">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide1">

         <div class="sliderbar-container">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide2">

         <div class="sliderbar-wrap1">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide3">

         <div class="sliderbar-container2">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

 </body>

CSS代码部分:

 #slide{

     width: 200px;

     height: 40px;

     margin-top:10px;

 }

 #slide1{

     width: 300px;

     height: 40px;

     margin-top:10px;

 }

 #slide2{

     width: 400px;

     height: 40px;

     margin-top:10px;

 }

 #slide3{

     width: 500px;

     height: 40px;

     margin-top:10px;

 }

 .sliderbar-wrap,.sliderbar-container,.sliderbar-wrap1,.sliderbar-container2{

     height: 40px;

     position: relative;

 }

 .sliderba-dot{

     width: 20px;

     height: 20px;

     background-color: #ccc;

     border-radius: 50%;

     border: 2px solid #ccc;

     position: absolute;

     top: 10px;

     z-index:;

 }

 .sliderba-line,.sliderba-baseline{

     height: 2px;

     position: absolute;

     top: 20px;

     left: 20px;

 }

 .sliderba-line{

     background-color: #ccc;

 }

 .sliderba-baseline{

     z-index:;

 }

Javascript代码部分:

 //构造函数

 function SlideBar(sClasee){

     var _this=this;

     this.aWrap=document.querySelector(sClasee);

     this.oDot=this.aWrap.querySelector('.sliderba-dot');

     this.oLine=this.aWrap.querySelector('.sliderba-line');

     this.oBaseline=this.aWrap.querySelector('.sliderba-baseline');

     this.disX=0;

     this.disY=0;

     this.oDot.onmousedown=function(ev){

         var ev=ev||window.event;

         _this.fnDown(ev);

     };

     return false;

 }

 //mousedown函数

 SlideBar.prototype.fnDown=function(ev){

     var ev=ev||window.event;

     var _this=this;

     this.ww=this.aWrap.offsetWidth-24;

     this.disX=ev.clientX-this.oDot.offsetLeft;

     document.onmousemove=function(ev){

         _this.fnMove(ev);

     };

     document.onmouseup=this.fnUp;

     return false;

 };

 //mousemove函数

 SlideBar.prototype.fnMove=function(ev){

     var ev=ev||window.event;

     var _this=this;

     this.oDot.style.left=(ev.clientX-this.disX<0)?0:((ev.clientX-this.disX>this.ww)?(this.ww+'px'):(ev.clientX-this.disX+'px'));

     this.oBaseline.style.width=this.oDot.offsetLeft+'px';

     this.callback({

         percent:Math.floor(this.oDot.offsetLeft/(this.aWrap.offsetWidth-this.oDot.offsetWidth)*100),

         distanceLeft:this.oDot.offsetLeft*this.step

     });

 };

 //mouseup函数

 SlideBar.prototype.fnUp=function(){

     document.onmousemove=null;

     document.onmouseup=null;

 };

 //配置函数

 SlideBar.prototype.config=function(options){

     this.options=options===undefined?{}:options;

     this.oDot.style.left=this.options.initPos === undefined?0:this.options.initPos;

     this.step=this.options.step===undefined? 1 : this.options.step;

     this.skin=this.options.skin===undefined? 1 : this.options.skin;

     this.element=this.options.element===undefined?'FFF':this.options.element;

     this.aWrap.style.width=this.options.width === undefined?'200px' : this.options.width ;

     this.oLine.style.width=this.options.width === undefined?'160px' : parseInt(this.options.width)-this.oDot.offsetWidth*2+4 +'px';

     this.callback=this.options.callback;

     if(this.skin==1){

         this.oDot.style.backgroundColor='#18df52';

         this.oDot.style.borderColor='#18df52';

         this.oBaseline.style.backgroundColor='#18df52';

     }else if(this.skin==2){

         this.oDot.style.backgroundColor='#18a2de';

         this.oDot.style.borderColor='#18a2de';

         this.oBaseline.style.backgroundColor='#18a2de';

     }else if(this.skin==3){

         this.oDot.style.backgroundColor='#b53400';

         this.oDot.style.borderColor='#b53400';

         this.oBaseline.style.backgroundColor='#b53400';

     }else if(this.skin==4){

         this.oDot.style.backgroundColor='#6b38de';

         this.oDot.style.borderColor='#6b38de';

         this.oBaseline.style.backgroundColor='#6b38de';

     }

 }

 </script>

调用:

 <script>

 window.onload=function(){

     //实例化一个对象 int

     var int=new SlideBar('.sliderbar-wrap');

     //设置配置参数

     int.config({

         initPos:0,//初始距离左边位置 默认是 0

         step:1,        //步长 默认是1

         skin:1,            // 圆点的颜色 skin 类型 1 2 3 

         width:'200px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init = new SlideBar('.sliderbar-container');

     //设置配置参数

     init.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:2,        //步长 默认是1

         skin:2,            // 圆点的颜色 skin 类型 1 2 3 

         width:'300px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init1 = new SlideBar('.sliderbar-wrap1');

     //设置配置参数

     init1.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:3,        //步长 默认是1

         skin:3,            // 圆点的颜色 skin 类型 1 2 3 

         width:'400px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init2 = new SlideBar('.sliderbar-container2');

     //设置配置参数

     init2.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:4,        //步长 默认是1

         skin:4,            // 圆点的颜色 skin 类型 1 2 3 

         width:'500px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

 }

 </script>

整个插件开发HTML:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>滑动条-slide 插件开发</title>

 </head>

 <style>

 #slide{

     width: 200px;

     height: 40px;

     margin-top:10px;

 }

 #slide1{

     width: 300px;

     height: 40px;

     margin-top:10px;

 }

 #slide2{

     width: 400px;

     height: 40px;

     margin-top:10px;

 }

 #slide3{

     width: 500px;

     height: 40px;

     margin-top:10px;

 }

 .sliderbar-wrap,.sliderbar-container,.sliderbar-wrap1,.sliderbar-container2{

     height: 40px;

     position: relative;

 }

 .sliderba-dot{

     width: 20px;

     height: 20px;

     background-color: #ccc;

     border-radius: 50%;

     border: 2px solid #ccc;

     position: absolute;

     top: 10px;

     z-index: 10;

 }

 .sliderba-line,.sliderba-baseline{

     height: 2px;

     position: absolute;

     top: 20px;

     left: 20px;

 }

 .sliderba-line{

     background-color: #ccc;

 }

 .sliderba-baseline{

     z-index: 9;

 }

 </style>

 <body>

     <div id="slide">

         <div class="sliderbar-wrap">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide1">

         <div class="sliderbar-container">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide2">

         <div class="sliderbar-wrap1">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

     <div id="slide3">

         <div class="sliderbar-container2">

             <div class="sliderba-dot"></div>

             <span class="sliderba-line"></span>

             <span class="sliderba-baseline"></span>

         </div>

     </div>

 </body>

 <script>

 window.onload=function(){

     //实例化一个对象 int

     var int=new SlideBar('.sliderbar-wrap');

     //设置配置参数

     int.config({

         initPos:0,//初始距离左边位置 默认是 0

         step:1,        //步长 默认是1

         skin:1,            // 圆点的颜色 skin 类型 1 2 3 

         width:'200px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init = new SlideBar('.sliderbar-container');

     //设置配置参数

     init.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:2,        //步长 默认是1

         skin:2,            // 圆点的颜色 skin 类型 1 2 3 

         width:'300px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init1 = new SlideBar('.sliderbar-wrap1');

     //设置配置参数

     init1.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:3,        //步长 默认是1

         skin:3,            // 圆点的颜色 skin 类型 1 2 3 

         width:'400px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

     //实例化一个对象 init

     var init2 = new SlideBar('.sliderbar-container2');

     //设置配置参数

     init2.config({

         initPos:'0px',//初始距离左边位置 默认是 0

         step:4,        //步长 默认是1

         skin:4,            // 圆点的颜色 skin 类型 1 2 3 

         width:'500px', //外层sliderbar-wrap的宽度

         callback:function(res){//回调函数 默认传一个obj返回2个key 一个是百分比 一个是距离左边的px值

             console.log(res)

         }

     })

 }

 //构造函数

 function SlideBar(sClasee){

     var _this=this;

     this.aWrap=document.querySelector(sClasee);

     this.oDot=this.aWrap.querySelector('.sliderba-dot');

     this.oLine=this.aWrap.querySelector('.sliderba-line');

     this.oBaseline=this.aWrap.querySelector('.sliderba-baseline');

     this.disX=0;

     this.disY=0;

     this.oDot.onmousedown=function(ev){

         var ev=ev||window.event;

         _this.fnDown(ev);

     };

     return false;

 }

 //mousedown函数

 SlideBar.prototype.fnDown=function(ev){

     var ev=ev||window.event;

     var _this=this;

     this.ww=this.aWrap.offsetWidth-24;

     this.disX=ev.clientX-this.oDot.offsetLeft;

     document.onmousemove=function(ev){

         _this.fnMove(ev);

     };

     document.onmouseup=this.fnUp;

     return false;

 };

 //mousemove函数

 SlideBar.prototype.fnMove=function(ev){

     var ev=ev||window.event;

     var _this=this;

     this.oDot.style.left=(ev.clientX-this.disX<0)?0:((ev.clientX-this.disX>this.ww)?(this.ww+'px'):(ev.clientX-this.disX+'px'));

     this.oBaseline.style.width=this.oDot.offsetLeft+'px';

     this.callback({

         percent:Math.floor(this.oDot.offsetLeft/(this.aWrap.offsetWidth-this.oDot.offsetWidth)*100),

         distanceLeft:this.oDot.offsetLeft*this.step

     });

 };

 //mouseup函数

 SlideBar.prototype.fnUp=function(){

     document.onmousemove=null;

     document.onmouseup=null;

 };

 //配置函数

 SlideBar.prototype.config=function(options){

     this.options=options===undefined?{}:options;

     this.oDot.style.left=this.options.initPos === undefined?0:this.options.initPos;

     this.step=this.options.step===undefined? 1 : this.options.step;

     this.skin=this.options.skin===undefined? 1 : this.options.skin;

     this.element=this.options.element===undefined?'FFF':this.options.element;

     this.aWrap.style.width=this.options.width === undefined?'200px' : this.options.width ;

     this.oLine.style.width=this.options.width === undefined?'160px' : parseInt(this.options.width)-this.oDot.offsetWidth*2+4 +'px';

     this.callback=this.options.callback;

     if(this.skin==1){

         this.oDot.style.backgroundColor='#18df52';

         this.oDot.style.borderColor='#18df52';

         this.oBaseline.style.backgroundColor='#18df52';

     }else if(this.skin==2){

         this.oDot.style.backgroundColor='#18a2de';

         this.oDot.style.borderColor='#18a2de';

         this.oBaseline.style.backgroundColor='#18a2de';

     }else if(this.skin==3){

         this.oDot.style.backgroundColor='#b53400';

         this.oDot.style.borderColor='#b53400';

         this.oBaseline.style.backgroundColor='#b53400';

     }else if(this.skin==4){

         this.oDot.style.backgroundColor='#6b38de';

         this.oDot.style.borderColor='#6b38de';

         this.oBaseline.style.backgroundColor='#6b38de';

     }

 }

 </script>

 </html>

效果图如上，如果有BUG欢迎留言，共同完善。

插件开发-滑条(slide)开发的更多相关文章

滑屏 H5 开发实践九问
滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素和表格类型 ) 2,一个页面 ...
一条java开发工程师的升级路线,从初级到无语言障碍
看了一篇文章,讲述的是如何进行后端开发升级,现在分享下,我的总结,感谢写文章的作者大大,觉得他很会坚持,虽然一直在骂人,但是,我觉得人最大的敌人就是懒惰,所以骂得好现在写下我的总结,希望对有志者有帮 ...
QGIS 3.14插件开发——Win10系统PyCharm开发环境搭建四步走
前言:最近实习要求做一个QGIS插件,网上关于QGIS 3.14插件开发环境搭建的文档不多,而且也不算太全面.正好实习的时候写了一个文档,在这里给大家分享一下. 因为是Word转的Markdown,可 ...
H5滑条(input type=range)
input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...
16条Android开发小经验
1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以sp为单位的. 所以如果直接用返回的值来设置会出错,解决办法是用setTextSiz ...
【插件开发】—— 10 JFace开发详解
前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...
滑条滚动发请求要用Debounce
import debounce from 'lodash.debounce'; this.deboucedFunc = debounce(this.viewModel.v_onHomeworkRequ ...
IOS开发－UI学习－UISlider（滑动条）的使用
滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...

随机推荐

airflow-operator 可以管理airflow 的kuberntes 自定义controller && crd
使用airflow-operator 我们可以让airflow 可以很方便的运行在k8s集群环境中,当前还在开发中主要分为两部分:airflowbbase && airfowclus ...
[转]xargs详解
为什么要用xargs,问题的来源在工作中经常会接触到xargs命令,特别是在别人写的脚本里面也经常会遇到,但是却很容易与管道搞混淆,本篇会详细讲解到底什么是xargs命令,为什么要用xargs命令以 ...
oauth2 java 代码示例
@RequestMapping("/oauth") @Controller public class OauthController { String clientId = &qu ...
flume-ng-sql-source实现oracle增量数据读取
一.下载编译flume-ng-sql-source 下载地址:https://github.com/keedio/flume-ng-sql-source.git ,安装说明文档编译和拷贝jar包嫌麻 ...
Eclipse安装插件的“最好方法”：dropins文件夹的妙用
在Eclipse3.4以前安装插件非常繁琐. 在Eclipse3.5以后插件安装的功能做了改进.而且非常方便易用. 我们只需要把需要的插件复制(拖放)到eclipse\dropins,然后插件就安装成 ...
javaweb下载中的一个问题
如果你发现,response头以及contentType都已经设置没错,但出现浏览器将下载的文件内容显示到新窗口那么解决方案就是在请求的时候不要产生新的窗口
GTP+SDI工程播出部分思路整理（2）
GTP+SDI工程播出部分思路整理(2) 以同样的方法来分析tx_video_a_c_in信号: SDI核中tx_video_a_c_in信号连接情况如下所示 .tx_video_a_c_in ...
RTTI D7
RTTI需要引用单元TypeInfo 至于RTTI的数据结构,大家可以参考TypeInfo单元的代码看例子,先为大家介绍一下根据字符串找到属性,并且对其修改的例子根据属性字符串找到属性,并修改属性 ...
Linux配置Python默认版本
我们知道在Windows下多版本共存的配置方法就是改可执行文件的名字,配置环境变量. Linux中的配置原理差不多,思路就是生成软链接,配置到环境变量. 在没配置之前,我的Ubuntu中安装了pyth ...
自动控制中常用的Matlab命令
部分分式展开:[r p k]=residue[num,den] 传递函数到状态空间:[A, B, C, D]=tf2ss(num, den) % 状态空间不唯一,Matlab给出其中一种状态空间到 ...

插件开发-滑条(slide)开发

插件开发-滑条(slide)开发的更多相关文章

随机推荐

热门专题