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

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

用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

网页制作

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

做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。现在需要页面直接打印，方便没有安装OFFICE的用户。需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。解决方法：用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

江山如画
2019年2月15日
3.7K00
网页制作

5种 CSS 实现DIV中内容垂直居中的方法

使用 CSS 实现DIV中内容垂直居中并不容易，有些方法在一些浏览器中无效。今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法，以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div class=…

江山如画
2018年9月23日
13.8K00
网页制作

第6课：超链接

CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。

江山如画
2020年2月22日
2.8K03
CSS border-radius 深入学习（含可视化生成工具）

没有学过CSS border-radius 的同学，请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法： .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角，如下图：只输入一个数值，所有角都会被四舍五入，若要固定值可以使用 …

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

JS实现开关效果，可单选和组选

JS实现的checkbox开关效果，可单个打开开关，也可一次关闭所有或打开所有开关。 <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现开关效果，可单选和组选|www.125jz.com</title…

江山如画
2018年7月29日
10.9K00
网页制作

javascript-快速掌握DOM技术

Javascript的组成： 1. js的语法（核心)。 2. DOM(文本对象模型) ：用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML（DHTML）得以实现，可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本)：DOM1，DOM2，DOM3 3. BOM(浏览器模型) BOM是Browser Object Model的…

江山如画
2018年7月17日
4.9K00

发表回复

登录后才能评论