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

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

用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

网页制作

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

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

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

第6课：学习更多HTML元素

到现在，你有没有独立完成过一个网页？你可以的，看看下面的例子： <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

江山如画
2018年1月20日
11.6K03
网页制作

css布局基础：浮动和清除浮动练习2

主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：方法1：通过overflow属性方法2：通过clear属性方法3：通过伪元素选择器（推荐）效果图：参考： <header> <img …

孙萍
2020年4月4日
4.9K00
网页制作

iframe中子页和父页面如何传值

本文介绍了，父页面father.html和子页面son.html之间如何传值，子页面如何调用父页面中的函数等操作

江山如画
2021年11月30日
5.8K00
网页制作

第12课：页面布局（CSS）

如何为页面实现理想的布局？你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…

江山如画
2018年1月19日
11.5K01
网页制作

H5不支持frameset的三种解决方案：div+iframe、include、jQuery的onload方法加载页面

frameset标签定义框架集，它用于组织多个窗口（框架）。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

江山如画
2020年1月1日
14.8K00

发表回复

登录后才能评论