TweenMax+Draggable实现的一个拖动换色滑块效果代码
代码语言：html
所属分类：拖放
代码描述：TweenMax+Draggable实现的一个拖动换色滑块效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<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: 800px;
height: 600px;
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>
<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.1.20.3.js"></script>
</head>
<body>
<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="#000" opacity="0.1"/>
<rect class="track" x="158" y="334" width="500" height="35" fill="#0071bc"/>
<g class="iconGroup" transform="translate(20, 0)">
<g class="iconRing">
<circle cx="208.5" cy="281.5" r="35" fill="#fffcf9" opacity="0.5"/>
<circle class="iconFill" cx="208.5" cy="281.5" r="29.75" fill="#0071bc"/>
</g>
<path class="icon" d="M208.63,267.13c1.34,2,2.67,3.78,3.91,5.45,3.83,5.21,6.86,9.33,6.86,13.3a10.78,10.78,0,0,1-21.55,0c0-3.95,3-8,6.81-13.2C205.91,271,207.27,269.13,208.63,267.13Z" fill="#FFFCF9" fill-rule="evenodd"/>
</g>
<!-- <path d="M267,341H250V320h17Z" fill="#FFFCF9"/> -->
<g clip-path="url(#mainMask)">
<g clip-path="url(#panelMask)">
<use class="gradPanel" xlink:href="#panel" y="103" fill="url(#panelGrad)"/>
</g>
<rect class="draggerShadow" x="125" y="334" width="34" height="35" fill="url(#draggerGrad)"/>
<text x="290" y="294" class="sliderProp sliderLabel">Tint</text>
<rect class="dragger" x="158" y="334" width="30" height="35" fill="#FFFCF9"/>
<text x="45%" y="400" class="valueProp sliderLabel">0%</text>
</g>
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0