js实现进度拖拽的效果-调节音量

江山如画 • 2019年2月15日下午1:48 • 网页制作 • 阅读 8865

用js实现的一个进度拖拽效果，常用于调节音量。

该程序代码简单易懂，单页面可多次调用，效果如下图：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</title> <style> body{margin:0;padding:0;font-size:12px;} .scale{background: #ddd; width: 200px; height: 3px; position: relative;margin: 20px;} .scale span{background:#aaa;width:8px;height:16px;position:absolute;left:-2px;top:-6px;cursor:pointer; border-radius: 3px;} .scale div{background: #66D9EF; position: absolute; height: 3px; width: 0; left: 0; bottom: 0; } </style> </head> <body> <div class="scale" id="bar"> <div></div> <span id="btn"></span> </div> 音量：<span id="title">0</span> <script> var scale = function (btn,bar,title){ this.btn = document.getElementById(btn); this.bar = document.getElementById(bar); this.title = document.getElementById(title); this.step = this.bar.getElementsByTagName("div")[0]; this.init = function (){ var f=this,g=document,b=window,m=Math; f.btn.onmousedown=function (e){ var x=(e||b.event).clientX; var l=this.offsetLeft; var max=f.bar.offsetWidth-this.offsetWidth; g.onmousemove=function (e){ var thisX=(e||b.event).clientX; var to=m.min(max,m.max(-2,l+(thisX-x))); f.btn.style.left=to+'px'; f.ondrag(m.round(m.max(0,to/max)*100),to); b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty(); }; g.onmouseup=new Function('this.onmousemove=null'); }; }; this.ondrag = function (pos,x){ this.step.style.width=Math.max(0,x)+'px'; this.title.innerHTML=pos+'%'; }; this.init(); } new scale('btn','bar','title'); //实例化一个拖拽 </script> </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3259.html

赞 (0)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

如何单独设置打印网页的样式

上一篇 2019年2月15日下午1:18

实现网页全屏和退出全屏JS代码，多浏览器兼容

实现网页全屏和退出全屏JS代码，多浏览器兼容

下一篇 2019年2月15日下午1:55

网页制作

如何在网页中输入多个连续的空格？

默认状态下（输入法为半角状态），按空格键只能输入一个空格，要在文本之间插入多个连续的空格，可以使用以下几种方法： 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下，使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“ ”字符。

江山如画
2020年4月3日
33.9K03
网页制作

第7课：元素的分类与标识（class和id）

有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。用class对元素进行分类比方说，我们有两个由链接组成的列表。…

江山如画
2020年2月25日
7.4K02
网页制作

实现表格单线边框的两种方法

实现表格单线边框方法一 border-collapse: collapse; 代码如下： See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二给table上边和左边设上边框线，给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

江山如画
2019年10月31日
12.7K00
网页制作

第2课：CSS的工作原理

在这一课，你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型，以及在HTML文档里使用CSS所必需的代码。

江山如画
2020年2月22日
11.4K07
网页制作

css中id和class的优先级问题，与顺序无关

id，class，style的优先级别顺序为style高于id高于class。

江山如画
2020年11月15日
18.4K00
网页制作

CSS3动画：@keyframes animation 案例——制作滚动公告

滚动公告的制作请参阅：Marquee标签实现跑马灯、滚动公告、通知效果今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。注释：当动画完成后，动画的状态会回到初始状…

江山如画
2019年2月26日
13.1K01

发表回复

登录后才能评论