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

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

用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课：开始学习HTML

建议你每天学习2到3课，然后花点时间来实验你所学到的新知识。学习制作网站是件充满乐趣的事，而且一旦掌握它，你便会感到无比满足。好的，不多说，我们现在就开始吧！这第一课中，我们简要介绍制作网站所需的工具。需要哪些工具？ “浏览器（browser）”你有了，它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。也许你听说过、甚至用过一些网页制作工具…

江山如画
2018年1月20日
11.8K034
网页制作

网页中的框架（详解）

所谓框架便是网页画面分成几个框窗，同时取得多个 URL。一、制作框架页面的步骤： 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的二、基本语法 <frameset> <frame src=”url”> <noframes&g…

江山如画
2020年4月11日
15.8K02
网页制作

第13课：浮动元素（float）

我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：如何实现这个效果？上例的HTML代码如下所示： <div id=”picture”><…

江山如画
2020年2月25日
3.0K00
网页制作

22个HTML5的初级技巧

本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

zhrjgy
2018年3月18日
3.6K00
网页制作

jQuery获取URL传递的参数

URL传递参数是程序开发中经常用到的，中国网页设计给大家分享使用jQuery如何获取URL传递的参数。例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下： //获取URL参数a和b funct…

江山如画
2018年9月30日
8.6K00
网页制作

jQuery屏蔽页面右键，禁止复制，文本选择代码

屏蔽页面右键，禁止复制，文本选择功能，用jQuery实现非常简单。 125建站网分享两种方法。方法一： //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

江山如画
2019年10月16日
4.3K00

发表回复

登录后才能评论