肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › 音量滑块控件制作

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

音量滑块控件制作

TA的其它主题

发表于 2021-9-26 10:06 | 查看: 204| 回复: 0

音量滑块控件建造

音量滑块控件若何建造呢？来看做者多图为你解答。

起首咱们来看下结果：

在这个音量条中除通例的滑块操作，还必要按照当前的进度扭转左边音量图标。
元件绘制
咱们先来看下都得必要画哪些元件：

左边的音量图标是一个有4个状况的动态面板，其他的看图片你们应当可以看懂！
交互逻辑
让咱们明白下交互的逻辑，晓得接下来咱们要做些甚么。交互是在拖动滑块时产生的变革，以是交互必要做在滑块上！除拖动时，还必要载入时对元件举行初始化显示。

滑块拖动
咱们先看拖动滑块时的交互，起首咱玉米视频们必要让这个滑块可以拖动，可是只有动态面板才可以拖动，以是咱们必要先将滑块转化为动态面板，以后的交互都是做在这个滑块动态面板上的。

元件→挪动☑当前元件挪动[程度拖动]，只有滑块便可以只摆布拖动了，但还必要限定它的摆布拖动范畴。左鸿沟：[[max.x]]；右鸿沟：[[max.x+max.width]]。

可能有些同窗对右鸿沟的设置有些含糊，这里图解一下~

左边的x坐标为0，max.x就是左边到当前x坐标的宽度，也就是赤色区域。赤色区域加之蓝色区域，便可以获得绿色区域，也就是右鸿沟的x坐标了。
当前音量进度
元件→设置尺寸☑now(矩形)将当前音量进度的宽度设置为[[This.x-max.x]]

当前音量文本
元件→设置文本☑volume(矩形)设置当前音量文本的值为[[(now.width/(max.width-This.width)*100).toFixed(0)]]

在拖动到最后侧时，其实是没有拖到max完成宽度的，而是拖到了max宽度-滑块宽度的位置。以是现实的音量上限宽度应当是max.width-This.width。

当前宽度/上限宽度的出的是当前占上限宽度的小数百分比，乘以100以后就是咱们需求的0-100的数值范畴了，但是后面另有不少不少的小数点。

在这里咱们必要进修一个函数：

[[LVAR.toFixed(decimalPoints)]]
用处：将一个数字转为保存指定位数的小数，小数位数超越指定位数时举行四舍五入。参数：decimalPoints为保存小数的位数。
（此处援用小楼教员Axure RP8函数速查表文档内容）
音量icon&初始化
音量icon快猫视频的切换是按照当前音量上的文字举行果断的，注用意中的if与else if，在if/else if处右键可以切换。if是挨个举行果断的，else if是若是没知足上面的前提，就会进入else if，知足了就跳过else if。

最后，将设置当前音量进度和当前音量文本的交互直接粘贴到载入时就完成啦~
icon静音与规复
正在我筹算保留写完的教程时，忽然发明不太完善！还差一个点icon静音/规复的交互。

点击icon时，若是当前的状况不是音量无，则必要先用全局变量记实下静音以前的面板，然后再静音。若是如今已是静音了，那就要挪用以前记下来的变量，将动态面板的状况规复至以前的状况。

嗯，这下是真的大！功！告！成！

作者：Synmo梦儿，公家号：梦呓Axure

本文由 @Synmo梦儿原创公布于人人都是产物司理。未经允许，制止转载。

题图来自 pexels，基于 CC0 协定

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册