TweenMax+vue实现滑块拖动选择刻度值换色效果代码
代码语言:html
所属分类:拖放
代码描述:TweenMax+vue实现滑块拖动选择刻度值换色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { margin: 0; color: white; font-family: Arial, Helvetica, sans-serif; } .main-container { display: grid; grid-template-columns: 1fr; grid-template-rows: 3fr 1fr; height: 100vh; overflow-x: hidden; } .upper-container { position: relative; background: linear-gradient(tobottomright, #5564C2, #3A2E8D); } .temperature-text { position: absolute; bottom: 150px; user-select: none; font-size: 100px; width: 100%; text-align: center; } .temperature-graduation { left: calc(50% - 150px); position: absolute; bottom: 25px; user-select: none; } .temperature-element { text-align: center; display: inline-block; width: 40px; margin: 0 10px 0 10px; opacity: 0.7; } .temperature-element-line { font-size: 7px; } .lower-container { background-color: #12132C; } .slider-container { width: 150px; height: 80px; margin-top: -30px; margin-left: calc(50% - 187px); position: relative; } .slider-button { position: absolute; left: 42px; top: 5px; width: 50px; height: 50px; border-radius: 50%; background-color: #2724A2; cursor: grab; cursor: -webkit-grab; cursor: -moz-grab; } .grabbing { cursor: grabbing; cursor: -webkit-grabbing; cursor: -moz-grabbing; } .slider-icon { margin-top: 16px; margin-left: 21px; color: white; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> </head> <body> <div id="app" class="main-container" :class="{'grabbing': dragging}" @mousemove="mouseMoving" @mouseUp="stopDrag"> <div class="upper-container" :style="bgStyle"> <h2 class="temperature-text">{{currentTemperature | round}}</h2> <div class="temperature-graduation"> <div class="temperature-element" v-for="el in temperatureGrades" :key="el" :style="tempElementStyle(el)"> <span class="temperature-element-number">{{el}}</span><br> <span class="temperature-element-line">|</span> </div> </div> </div> <div class="lower-container"> <div class="slider-container" :style="sliderStyle"> <svg> <path d="M74.3132 0C47.0043 2.44032e-05 50.175 30 7.9179 30H144.27C99.4571 30 101.622 -2.44032e-05 74.3132 0Z" transform="translate(-7.38794 0.5)" fill="#12132C"/> </svg> <div class="slider-button" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0