鼠标拖动地球远近控制音乐音量大小

2019-05-19 18:51:27 阅读：313 来源： 互联网

标签：鼠标拖动 self per moon color 音量 background 255

效果图：

在这里插入图片描述

代码

1.html结构

<div class="wrapper">
    <audio autoplay loop></audio>
    <div class="title">拖动地球远近来控制音量大小</div>
    <div class="circle sun"></div>
    <div class="circle moon"></div>
    <div class="per"></div>        
</div>

2.css

色彩模式

RGB色彩模式：可以理解为大自然的颜色都是由红、绿、蓝三种光学颜色混合而成的。所以我们可以用RGB色彩模式来表示某种颜色。颜色最小是0最大值是255,相应位置上是255表示那种颜色最纯，是0没有那种颜色。譬如rgb(255,0,0)纯红,rgb(0,255,0)纯绿，rgb(0,0,255)纯蓝，rgb(255,255,255)就是黑了。
十六进制颜色（简称HEX）：则是使用 # 的符号来表示十六进制，形如#RRGGBB的格式，每两位上的值就是RGB上的数字转换16进制后的值。
HSL色彩模式：就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

div{width: 100px; height: 20px;}
.red{background-color: red}
.red_hex{background-color: #ff0000}
.red_rgb{background-color: rgb(255,0,0);}
.red_hsl{background-color: hsl(0,100%,54%);}
.green_hex{ background-color:#00ff00;}
.blue_hex{ background-color: #0000ff;}

hsla模式和rgba模式与opacity的区别

其实hsla模式和rgba模式就是hsl模式和rgb模式增加一个opacity值，opacity 的Alpha值表示不透明度，取值在0到1之间。hsla模式和rgba模式与opacity的区别就是前两者不会影响子类的透明度；而opacity会影响子类的透明度，从而导致子类元素的颜色产生色差

div{width: 100px; height: 20px;}
.red_rgb_alpha{background-color: rgba(255,0,0,0.3);}
.red_hsl_alpha{background-color: hsla(0,100%,54%,0.3);}
.red_hsl_opacity{background-color:red; opacity: 0.3}

css完整代码：

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: hsl(194, 64%, 49%)
        /* 色调 饱和度 亮度 */
}

.wrapper {
    width: 70%;
    height: 500px;
    margin: 50px auto;
    position: relative;
}

.title {
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
    margin: 20px;
}

.circle {
    width: 20%;
    padding-top: 20%;
    /* 内容撑起高度 */
    border-radius: 50%;
    position: absolute;
    left: 30%;
    top: 30%;
}

.sun {
    background-color: #ff7;
    box-shadow: 0 0 50px #ff7;
}

.moon {
    left: 52%;
    cursor: pointer;
    box-shadow: inset 5px 5px 50px rgba(255, 255, 119, 0.3);
    /* 内外阴影 阴影的X轴(可以使用负值)  阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色*/
}

.per {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: bolder;
}

3.js

插入音乐路径

function Index(mus){
    this.music = mus.music;
    this.dom = {
        sun: $('.sun'),
        moon: $('.moon'),
        audio: $('audio'),
        perc: $('.per')      
    }
    this.flag = false;//监控是否在拖拽
    this.top = this.dom.moon.offset().top - $('.wrapper').offset().top;
    this.init(); 
}
new Index({'music':'music/summer.mp3'});

初始函数

Index.prototype.init = function(){
    var source = $('<source src="'+this.music+'"></source>');
    this.dom.audio.append(source);//加载音乐
    this.bindEvent();
    this.change(0);
}

鼠标绑定事件

Index.prototype.bindEvent = function(){
    //拖拽 mousedown-->mousemove-->mouseup
    var self = this;
    var moon = self.dom.moon;
    var disX;
    moon.on('mousedown',function(e){//鼠标落下
        self.flag = true;
        disX = e.clientX - moon.offset().left;//鼠标距元素左边距离
    });
    moon.on('mousemove',function(e){//鼠标移动
        if(!self.flag){
            return;
        }
        var left = e.clientX - disX - $('.wrapper').offset().left;//获得当前鼠标距离wrapper的left
        moon.css({
            'left': left + 'px',
            'top': self.top + 'px'
        })
        self.getVoice();
    })
    moon.on('mouseup',function(e){//鼠标抬起
        self.flag = false;
    })
}

计算球移动的距离

Index.prototype.getVoice = function(){ 
    var self = this;
    var d = parseInt(self.dom.moon.css('width'));
    var per,
        moonL = self.dom.moon.offset().left;
        moonR = moonL + d;
        sunL = self.dom.sun.offset().left;
        sunR = sunL + d;
    //两球没有接触
    if(sunL > moonR || moonL > sunR){
        per = 0;
    } else{
        //moon在sun右边
        if(sunL < moonL){
            per = (sunR - moonL)/d;
        //moon在sun左边            
        }else if(moonR >=sunL){
            per = (moonR - sunL)/d;
        }
    }
    self.change(per);   
}

改变音乐的音量

Index.prototype.change = function(per){
    var self = this;
    self.dom.audio[0].volume = per; // 设置音频音量
    self.dom.perc.html((per*100).toPrecision(4) + '%');//取4位小数
    self.dom.moon.css({//月亮颜色的变化
        'background': 'hsl(194,56%,'+(1-per)*60 +'%)'
    })
    $('body').css({//背景颜色的变化
        'background': 'hsl(' + (194 + Math.floor(166*per)) + ",66%,"+(1-per)*50+'%)'       
    })
}

标签：鼠标,拖动,self,per,moon,color,音量,background,255
来源： https://blog.csdn.net/callmeCassie/article/details/90342625

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

鼠标拖动地球远近控制音乐音量大小

效果图：

代码

1.html结构

2.css

3.js