介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> Title</title>
& lt;才能style>
,,,# all {
,,,,,宽度:,500 px;
,,,,,身高:,86 px;
,,,,,保证金:,100 px 汽车;
,,,,,位置:,相对;
,,,}
,
,,,# bar {
,,,,,宽度:,500 px;
,,,,,身高:,20 px;
,,,,,这个特性:,10 px;
,,,,,背景:,# 9 acfea;
,,,,,位置:,绝对;
,,,,,:,0;
,,,,,底部:,0;
,,,,,左:,0;
,,,,,对的:,0;
,,,,,保证金:,汽车;
,,,,,光标:,指针;
,,,}
,
,,,# box {
,,,,,宽度:,30 px;
,,,,,身高:,30 px;
,,,,,背景:,# ec971f;
,,,,,位置:,绝对;
,,,,,底部:,0;
,,,,,:,0;
,,,,,保证金:,auto 0;
,,,,,这个特性:,50%;
,,,,,光标:,指针;
,,,,,的转变:,left 0.1 s linear 0;
,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt;才能div id=癮ll"比;
,,,& lt; p>当前位置0% & lt;/p>
,,,& lt; div id=癰ar"比;
,,,,,& lt; div id=癰ox"祝辞& lt;/div>
,,,& lt;/div>
& lt;才能/div>
& lt; script>
,
var 才能;所有=. getelementbyid (“all");//容器
var 才能;p=document.querySelector (“p");//进度百分比
var 才能;酒吧=. getelementbyid (“bar");//进度显示条
var 才能;盒=. getelementbyid (“box");//进度按钮
,
var 才能boxL、newL moveL, mouseX,离开;
var 才能;cha =, bar.offsetWidth 作用;box.offsetWidth;
var 才能;指数=0;//标记状态
,
var 才能evt=new 事件(“change");//本身的事件
,,init ();
function 才能;init (), {
,,,box.addEventListener (“mousedown" mouseDownclickHandler);
,,,document.addEventListener (“mousemove" mouseMoveclickHandler)
,,,document.addEventListener (“mouseup" mouseUpclickHandler);
,,,document.addEventListener (“change" changeHandler);
,,,bar.addEventListener (“click" clickHandler);
,,}
,
function 才能mouseDownclickHandler (e), {
,,,指数=1;
,,,boxL=box.offsetLeft;
,,,mouseX=e.clientX;//鼠标按下拖动的位置
,,}
,
function 才能mouseMoveclickHandler (e), {
,,,如果(指数===1){
,,,,,moveL=e.clientX-mouseX;//鼠标移动
,,,,,newL=boxL + moveL;//左值
,
,,,,,//判断最小值与最大值
,,,,,如果(newL<0) {
,,,,,,,newL =, 0;
,,,,,}
,,,,,如果(newL>=cha) {
,,,,,,,newL=cha;
,,,,,}
,,,,,//,改变左值
,,,,,box.style.left =, newL +, & # 39; px # 39;;
,,,,,//,计算比例
,,,,,var bili =, newL /, cha *, 100;
,,,,,p.textContent =, & # 39;当前位置& # 39;,+,Math.ceil(并),+,& # 39;% & # 39;;
,,,,,evt.elem=;//当前指向,对象
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关JS怎么实现音量控制拖动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下
<强>描述:
JS -实现音量控制拖动
,,,1),有底条,有拖拽按钮
,,2),设置最小和最大值
,,3),拖动定位后,抛出事件当前的所在值
<>强效果:
<强>实现:
