TweenMax+Draggable+svg实现可拖动带进度温度调整滑块效果代码

代码语言:html

所属分类:拖放

代码描述:TweenMax+Draggable+svg实现可拖动带进度温度调整滑块效果代码

代码标签: TweenMax Draggable svg 拖动 进度 温度 调整 滑块

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

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

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

   
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
   
<meta name="viewport" content="width=device-width, initial-scale=1">
   
<style>
        body
{
     
background-color: #222;
     
overflow: hidden;
     
/* text-align:center; */
     
display: flex;
     
align-items: center;
     
justify-content: center;
   
}
   
    body
,
    html
{
     
height: 100%;
     
width: 100%;
     
margin: 0;
     
padding: 0;
   
}
   
    svg
{
     
width: 1024px;
     
height: 768px;
     
visibility: hidden;
     
   
}
   
   
.sliderLabel{
     
text-anchor:start;
     
fill:#FFFCF9;
     
font-family: 'Questrial', serif;
     
font-size:27px;
     
letter-spacing:0.3px;
     
user-select:none;
     
-moz-user-select:none;
   
}
   
   
.valueProp{
     
text-anchor:start;
     
fill:#FFFCF9;
     
font-size:44px;
   
}
   
   
.dragger{
   
     
-webkit-tap-highlight-color:transparent;
     
   
}
   
</style>

</head>

<body>
   
<!-- partial:index.partial.html -->
   
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
 
<defs>
 
     
<rect id="panel" x="158" y="231" width="500" height="138"/>
 
<clipPath id="mainMask">
   
<use xlink:href="#panel"  fill="red"/>
   
   
</clipPath>
 
   
<linearGradient id="draggerGrad" x1="120" y1="344" x2="158.26" y2="344" gradientUnits="userSpaceOnUse">
     
<stop offset="0" stop-color="#0071bc" stop-opacity="0"/>
     
<stop offset="1" stop-opacity="0.15"/>
   
</linearGradient>
<linearGradient id="panelGrad" gradientUnits="userSpaceOnUse" x1="158" y1="300" x2="658" y2="300" gradientUnits="userSpaceOnUse">
     
<stop offset="0" stop-color="#0071bc" stop-opacity="0"/>
     
<stop offset="1" stop-color="#f2f2f2" stop-opacity="0.5"/>
   
</linearGradient>  
<clipPath id="panelMask">
   
<use class="panelMask" xlink:href="#panel" x="-500" fill="red"/>  
   
</clipPath>
 
 
</defs>
 
<use class="bgPanel" xlink:href="#panel"  fill="#0071bc"/>
 <use class="bgPanelCover" xlink:href="#panel"  fill=&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0