jquery+css实现拖拽逼真多档位换挡旋钮开关效果代码-html代码-BFW代码库

代码语言：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");
        this.$knob = this.$context.find(".knob");
        this.$handle = this.$context.find(".handle");
        this.$progress = this.$context.find(".progress");
        this.$center = this.$context.find(".center");
        this.$textOutput = this.$center.find("span");
        this.ctx = this.$progress.get(0).getContext("2d");
        knobOffset = this.$knob.offset();
        this.elementPosition = {
          x: knobOffset.left,
          y: knobOffset.top
        };
        this.centerX = this.$progress.width() / 2;
        this.centerY = this.$progress.height() / 2;
        this.canvasSize = this.$progress.width();
        this.addEventListeners();
        this.drawLine();
        this.draw();
        return;
      }

      addEventListeners() {
        this.$context.on("mousedown", this.onMouseDown);
        this.$context.on("mousemove", this.onMouseMove);
        $("body").on("mouseup", this.onMouseUp);
      }

      setDimmerPosition() {
        this.draw();
      }

      drawLine(endAngle) {
        var radius, startAngle, x, y;
        this.ctx.save();
        this.ctx.translate(this.centerX, this.centerY);
        this.ctx.rotate(145 * (Math.PI / 180));
        startAngle = 0;
        radius = 93;
        x = 0;
        y = 0;
        this.ctx.moveTo(98, 0);
        this.ctx.beginPath();
        this.ctx.shadowBlur = 10;
        this.ctx.lineWidth = 2.4;
        .........完整代码请登录后点击上方下载按钮下载查看