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

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

用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代码，多浏览器兼容

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

网页制作

CSS制作简洁的栏目/标题样式

CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

江山如画
2019年1月5日
8.8K03
网页制作

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

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

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

css布局基础：定位综合练习

主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。整体效果图：效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…

孙萍
2020年4月4日
7.4K02
网页制作

第15课：最后提示

祝贺！你已经进入最后一课了！我已经学到全部知识了？如果你已经学完以上教程，恭喜你，你已经学到了很多关于HTML的知识，并且完全有能力创建自己的网站！不过，你所学到的只是基础知识，还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。在最后这一课中，我们将给予一些最后提示：首先，在HTML文档中，应保持正确的顺序与结构。令你的HTML文档具有良…

江山如画
2018年1月18日
6.1K01
网页制作

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

实现网页全屏和退出全屏JS代码，兼容主流浏览器如：谷歌、火狐、360等。 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

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

css布局基础：行内元素、块级元素练习

主要知识点： 1、理解什么是行内元素？什么是块级元素？ 2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。扩展： 1、nth-child()选择器选择其父元素的第n个子元素。效果图：参考： <nav> <ul> <li><…

孙萍
2020年4月4日
11.1K01

发表回复

登录后才能评论