<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js实现拖拽的效果</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>

js实现音量拖拽的效果模拟的更多相关文章

  1. react实现的点击拖拽元素效果

    之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...

  2. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  3. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  4. ToolStrip控件左右拖拽移动效果实现

    1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位.2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1/ ...

  5. reactnative实现qq聊天消息气泡拖拽消失效果

    前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...

  6. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  7. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

  8. js实现简单拖拽效果

    方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...

  9. js仿QQ拖拽删除

    原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...

随机推荐

  1. Android Studio新建类头部注释和添加函数注释模板及快捷键

    一,Android Studio新建类头部注释 是不是有时候看到这个很心烦 其实Studio中有设置修改这些注释模板的信息的功能 其实很简单,只需要两步: 1.打开Setting设置面板,找到File ...

  2. Codeforces Round #324 (Div. 2)C. Marina and Vasya

    A的万般无奈...后来跑了大牛的这份代码发现, 题意是求一个序列与给定的两个序列有t个不同. 只要保证...对应位置就行了.. 所以处理起来非常方便.............. 可是没有感觉是对应位置 ...

  3. Beta版本冲刺第二天！

    该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业地址:https://edu.cnblogs.com/c ...

  4. iOS NSUserDefaults [setValue:forKey:] [setObject:forKey:] <Objc> setValue(_,forKey:) set(_,forKey) <Swift 3>

    前者其实是NSObject都可以调用的KVC方法,后者才是NSUserDefaults的实例方法: 这里参数的类型是nullable id,但是我建议你在传null的时候慎重考虑,否则你的应用就可能面 ...

  5. 浅谈算法——FWT(快速沃尔什变换)

    其实FWT我啥都不会,反正就是记一波结论,记住就好-- 具体证明的话,推荐博客:FWT快速沃尔什变换学习笔记 现有一些卷积,形如 \(C_k=\sum\limits_{i\lor j=k}A_i*B_ ...

  6. Codeforces Round #542(Div. 2) D1.Toy Train

    链接:https://codeforces.com/contest/1130/problem/D1 题意: 给n个车站练成圈,给m个糖果,在车站上,要被运往某个位置,每到一个车站只能装一个糖果. 求从 ...

  7. [NOIP2018校模拟赛]T2矩阵分组 Matrix

    题目链接: 矩阵分组 分析: 这道题求的是两部分极差当中大的那个的最小值.对于这种求最值的问题,我们很自然(其实并没有)地想到二分答案. 这个题有两个结论: (好像当时看出来了第一个?然后发现下面都不 ...

  8. angular 2 angular quick start Could not find HammerJS

    Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...

  9. AIX系统常用命令

    netstat -an | grep 9090  可以看到该端口正被监听,但却不知道是哪个进程占用了该端口 1. netstat -Aan|grep 端口号找到该端口连接对应的PCB/ADDR和连接的 ...

  10. A. The Fault in Our Cubes 暴力dfs

    http://codeforces.com/gym/101257/problem/A 把它固定在(0,0, 0)到(2, 2, 2)上,每次都暴力dfs检查,不会超时的,因为规定在这个空间上,一不行, ...