Draggable+TweenMax实现转动旋钮控制滚动条滚动效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：Draggable+TweenMax实现转动旋钮控制滚动条滚动效果代码，两者相互感应，拖动滚动条也能旋钮转动。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body{
  background-color: #26292f;
}
#knobBG, #knob {
  position:absolute;
  background-image: url('//repo.bfw.wiki/bfwrepo/icon/6603c77146ffc.png');
  width:355px; 
  height:355px;
}
#description {
  font-size:20px;
}
#knob {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAFjCAYAAADowmrhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NjUzMEVFRTcxQTAxMUUzOEU4QTk5MTRFNTE3MDhCNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NjUzMEVFRjcxQTAxMUUzOEU4QTk5MTRFNTE3MDhCNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM5NzI2Rjg5NzE5NjExRTM4RThBOTkxNEU1MTcwOEI1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM5NzI2RjhBNzE5NjExRTM4RThBOTkxNEU1MTcwOEI1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+9oYgDQAABgZJREFUeNrs3L9LnGcAwPH33rvT8/y5mPoDY4c6iU4uCgkOVTooSCAIzeqiIs7t0rWDHSou4n5LwMH/wNRBJ5FDXNrBSgKXDKIxqSaXs8/bWCj0R67kpD34fODBu5d7loeXL++93vOmrq+vIwD+WykxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHE2CoAiDEAYkzdnbNhtIRx52Y03xy/CONFGKUwXoXhxEaM4ZY0hNFTLBbvr6+vP9rd3e0plUpJmKPu7u6L0dHRp3Nzc4WhoaEn4dCzMN5YMsQYah/iz1ZXV5fD+Pzy8jKdzWbfZjKZd3EcV5IPVCqVOLyPFhYWtpeWlr4Ph34UZMQYaicO4+7a2tpXKysrX6TT6Xe5XO4qlUr93cmbWlxc3J6fn/82vP456bQlRIzh47UUi8UHs7Oz34Sr31Q+n7/80IQQ6/LGxsZ3g4ODm+HtS0vI/13GElAHPikUCl+GC4d0R0fHL+GK+IMTwmczm5ubD0OMd8QYMYba6Nzf3+9tbW0tNzU1Vf1V7ujo6PdfXPxkCRFj+Hgtp6enLW1tbVfZbLbqSefn5/nwJ2/5EGOokSTC4cq4Us0tij/M8Q8RxBhq6KK3t/cijuP0v4lxZ2fn6+j9BhAQY6iBFyMjI08PDg4+bWhoqPpnasPDw8+j97vyQIyhBp7PzMwUDg8Pv87lclVNCNEuT05OPk7mWj7qQWwJqAOvBgYGnkxNTW2HyKYaGxujfxpJsKenp3f6+vqSbdFuU1AXbPqgXvy2HXpra2t5b29vtFwu/+W3ukwmU56YmNgZHx9fi2yHRozh1oLcc3Jyci8Eefb4+PjO2dlZc/Jsivb29tf9/f2lsbGxx11dXT9EHhSEGMPtnrPRnx+hmZzEye0Ij9BEjAEQYwAxBkCMAcQYADEGEGMAxBhAjAEQYwAxBkCMAcQYADEGEGMAxBhAjAEQYwAxBkCMAcQYADEGEGMAxBhAjAEQYwAxBkCMAcQYADEGEGMAxBhAjAEQYwAxBkCMAcRYjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMQZAjAHEGAAxBhBjAMQYQIwBEGMAMbYKAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIMgBgDiDEAYgwgxgCIMYAYAyDGAGIsxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiDIAYA4gxAGIMIMYAiDGAGAMgxgBiLMYAYgyAGAOIMQBiDCDGAIgxgBgDIMYAYgyAGAOIMQBiDCDGAIgxgBgDIMYAYgyAGAOIMQBiDCDGAIgxgBgDIMYAYgyAGAOIMQBiDCDGAIgxgBgDIMYAYgyAGAOIMQBiDCDGAIgxgBgDIMYAYgyAGAOIMQC341cBBgC3OLiy5NmkcwAAAABJRU5ErkJggg==');
  z-index: 1;
}
.box {
  font-size:30px;
  padding: 10px;
}
#content .box {
  margin-left:425px;
  height: 335px;
}
#content{
  height:355px;
  overflow: hidden;
}
.box1{
  background-color: #88b6f7;
}
.box2{
  background-color: #9a9bff;
}
.box3{
  background-color: #bbfb94;
}
.box4{
  background-color: #ed74c4;
}
.box5{
  background-color: #eb984e;
}
.box6{
  background-color: #a9eaf1;
}
.box7{
  background-color: #dcecf1;
}
.box8{
  background-color: pink;
}
.box9{
  background-color: purple;
}
</style>


  
</head>

<body translate="n.........完整代码请登录后点击上方下载按钮下载查看