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