vue气球滑块选择器效果
代码语言:html
所属分类:表单美化
代码描述:vue气球滑块选择器效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <style type="text/css"> :root { --color-primary: #5626e8; --color-secondary: #d2daef; --color-bg: #f4f6fe; } * { box-sizing: border-box; } body { background-color: var(--color-bg); } main { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .sliderContainer { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 3em; } .sliderContainer .sliderContainer__input { width: 100%; -webkit-appearance: none; appearance: none; outline: none; height: 0.2em; background-image: -webkit-gradient( linear, left top, right top, color-stop(50%, var(--color-primary)), color-stop(50%, var(--color-secondary)) ); border-radius: 1em; margin: 0; } .sliderContainer .sliderContainer__thumb { cursor: pointer; width: 1.5em; height: 1.5em; border: 0.5em solid var(--color-primary); border-radius: 100%; background-color: white; position: absolute; top: 50%; transform: translateY(-50%); user-select: none; } .ballon { --size: 4em; width: var(--size); height: var(--size); display: flex; justify-content: center; align-items: center; background-color: var(--color-primary); border-bottom-left-radius: 50%; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; top: -1.2em; opacity: 0; } .ballon .ballon__text { color: white; transform: rotate(-45deg); font-family: Arial, Helvetica, sans-serif; } .ballon::after { content: ""; position: absolute; width: 0; height: 0; border-left: 0.25em solid transparent; border-right: 0.25em solid transparent; transform: rotate(-45deg); border-bottom: 0.25em solid var(--color-primary); top: 98%; left: 94%; } @media (max-width: 768px) { .sliderContainer { min-width: 95%; } } </style> </head> <body> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script> <script src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <main> <div class="sliderContainer"> <div class="ballon" ref="ballonEl"> <span class="ballon__text" ref="ballonTextEl">{{ percent }}</span> </div> <div v-on:mousedown="dragStart" v-on:touchstart="dragStart" ref="thumbEl" class="sliderContainer__thumb"></div> <div class="sliderContainer__input" ref="inputEl"></div> </div> </main> </body> <script> /** 让气球飞! 尝试将范围设置在 80 到 100 之间以查看飞行动画。 **/ let currentDeltaX = 0; //Utils const getElementOffset = el => el.getBoundingClientRect(); const getPercentInBetween = ({ value, min, max }) => { return (value - min) / (max - min) * 100; }; const getValueInBetween = (value, { min, max }) => { if (value < min) return min; if (value > max) return max; return value; }; const getSliderValue = () => { const getRef = ref => app.$refs[ref]; const { left: thumbElLeft, width: thumbElWidth } = getElementOffset( getRef("thumbEl") ); const { left: inputElLeft, right: inputElRight } = getElementOffset( getRef("inputEl") ); const thumbCenterPoint = thumbElLeft + thumbElWidth / 2; const rangeValue = getPercentInBetween({ value: thumbCenterPoint, min: inputElLeft, max: inputElRight }); const percent = Math.round( getValueInBetween(rangeValue, { min: 0, max: 100 }) ); return percent; }; const getBallonScaleValue = () => 1 + getValueInBetween(getSliderValue(), { min: 1, max: 99 }) / 480; //------------------- const app = new Vue({ el: "main", data: { isDragging: false, percent: 50, initialThumbElClientRect: null }, mounted: function() { const getRef = ref => this.$refs[ref]; TweenLite.set(getRef("thumbEl"), { y: "-50%" }); TweenLite.set(getRef("ballonEl&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0