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