TweenMax+Draggable+svg实现可拖动点击数字取值器代码-html代码-BFW代码库

TweenMax+Draggable+svg实现可拖动点击数字取值器代码

代码语言：html

所属分类：拖放

代码描述：TweenMax+Draggable+svg实现可拖动点击数字取值器代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
  background-color:#E8E8E8;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
  visibility:hidden;
 
}

#dragLabel,#ringLabel{
  font-family:Arial, sans-serif;
  font-size:23px;
  fill:#2E7D32;
  text-anchor:middle;
  font-weight:700;
  
}

 #ringLabel{
  fill:#E8F5E9;
}

circle, text, g, .pageDot{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
text, .pageDot{
-webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;     
  user-select: none;
}

.pageDot{
  cursor:pointer;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" text-rendering="optimizeSpeed">

<defs>
  <filter id="goo" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -7" result="cm" />
    
        <feComposite in="SourceGraphic" in2="cm" />
  	</filter>  
  <circle id="pageDot" fill="#8AB530" cx="0" cy="300" r="20"/>
  
</defs>
  <g id="wholeGroup">
  <g filter="url(#goo)">
<circle id="bgRing" fill="#2E7D32" stroke="#2E7D32" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="50"/>  


<line id="track" fill="none" stroke="#2E7D32" stroke-width="60" stroke-linecap="round" stroke-miterlimit="10" x1="0" y1="300" x2="0" y2="300"/>
  </g>
<circle id="bgRingCenter" fill="#388E3C" stroke="none" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="0"/>        
    <text id="ringLabel" x="0" y="300">20</text>
    <circle id="topRing" fill="#388E3C" stroke="none" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="35"/>
<g id="dotGroup" stroke="#2E7D32" stroke-width="0">

</g>

  <g id="dragRing" >
  <circle fill="rgba(23, 45, 190, 0)" stroke="none" stroke-width="10" stroke-miterlimit="10" cx="0" cy="300" r="30"/>
    <text id="dragLabel" x="0" y="310">50</text>
  </g>
  </g>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.0.1.0.js"></script>
    <script >

        var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    mainSV.........完整代码请登录后点击上方下载按钮下载查看