jquery+css实现逼真灯光控制面板拖拽控制效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现逼真灯光控制面板拖拽控制效果代码
代码标签: 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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0