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.........完整代码请登录后点击上方下载按钮下载查看