jquery+css实现逼真灯光控制面板拖拽控制效果代码-html代码-BFW代码库

jquery+css实现逼真灯光控制面板拖拽控制效果代码

代码语言：html

代码描述：jquery+css实现逼真灯光控制面板拖拽控制效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
   
    <meta charset="UTF-8">
   <style>
html,body {
        height:100%;
        width:100%;
        overflow:hidden
}
body {
        background:#000 radial-gradient(ellipse at center,#8c8f95 0,#4e5054 100%) center center no-repeat
}
.dimmer {
        position:absolute;
        top:50%;
        left:50%;
        margin:-150px;
        width:300px;
        height:300px;
        border-radius:50px;
        background:#eaebea;
        background:linear-gradient(to bottom,#f3f4f3 0,#afb0b3 99%);
        box-shadow:0 20px 14px 0 rgba(70,70,70,0.4),0px 4px 10px -0px rgba(0,0,0,0.6),0px -4px 4px 4px #97979a inset
}
.dimmer:before {
        content:"";
        position:absolute;
        width:300px;
        left:50%;
        margin-left:-150px;
        height:190px;
        top:0;
        border-radius:50px;
        background:linear-gradient(to bottom,rgba(243,244,243,0.8) 0,rgba(243,244,243,0) 99%);
        z-index:1
}
.dimmer:after {
        content:"";
        position:absolute;
        top:22px;
        left:26px;
        width:250px;
        height:250px;
        border-radius:30px;
        box-shadow:0 -1px 2px 2px rgba(0,0,0,0.3) inset,0px 1px 3px 3px #f3f4f3 inset
}
.knob {
        z-index:20;
        cursor:pointer
}
.knob .center {
        position:absolute;
        width:116px;
        height:116px;
        left:50%;
        top:50%;
        margin:-58px 0 0 -58px;
        border-radius:160px;
        background:linear-gradient(to bottom,#e7e7e7 0,#bec0c3 99%);
        box-shadow:inset 0 5px 4px 2px rgba(0,0,0,0.35);
        z-index:2
}
.knob:before {
        content:"";
        position:absolute;
        width:164px;
        height:164px;
        left:50%;
        top:50%;
        margin:-82px 0 0 -82px;
        border-radius:164px;
        background:linear-gradient(to bottom,#f5f5f5 0,#a6a7a7 99%);
        box-shadow:0 5px 12px 0 rgba(0,0,0,0.7);
        z-index:0
}
.knob:after {
        content:"";
        position:absolute;
        width:142px;
        height:142px;
        left:50%;
        top:50%;
        margin:-71px 0 0 -71px;
        border-radius:140px;
        background:linear-gradient(to bottom,#afb0b3 0,#e5e7e6 99%);
        z-index:1
}
.progress {
        position:absolute
}

   </style>
</head>

<body style="background: radial-gradient(at center center, rgb(140, 143, 149) 0%, rgb(0, 0, 0) 100%) center center no-repeat rgb(0, 0, 0);">
    <figure class="dimmer">
        <div class="wrapper">
            <div class="knob">
                <div class="center"></div>
            </div>
        </div><canvas class="progress" width="300" height="300"></canvas></figure>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script >
(function() {
  var Dimmer, dimmer;

  Dimmer = (function() {
    class Dimmer {
      constructor($context) {
        var knobOffset;
        // Callbacks
        this.onMouseDown = this.onMouseDown.bind(this);
        this.onMouseUp = this.onMouseUp.bind(this);
        this.onMouseMove = this.onMouseMove.bind(this);
        this.$context = $context;
        this.$body = $("body&q.........完整代码请登录后点击上方下载按钮下载查看