实现一起滚动 且不超过盒子的位置，需要添加算法，计算相对斜率，得到滚动条的滚动相对的比例 就是下面盒子的相对比例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue3的地址 CDN 引入 这时候需要访问远程的服务器-->
<script src="../vue3/lib/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
background: grey;
}
.box {
width: 50%;
margin: 100px auto;
background-color: black;
}
.g-container {
position: relative;
width: 100%;
height: 30px;
border-radius: 30px;
background: #eee;
background-image: repeating-linear-gradient(-60deg, #f32b3f 0%, #f43d51 3%);
}
.g-progress {
position: relative;
width: 70%;
height: 100%;
border-radius: 30px;
background: pink;
max-width: 100%;
min-width: 4%;
background-image: linear-gradient(-60deg, #fff6f8 100%, #ffdedf 0%);
}
.shuxian {
position: absolute;
right: 0;
/* margin-right: -5px; */
top: 15px;
height: 40px;
border-left: 1px solid red;
width: 1px;
/* transform: translate(-100%); */
}
.shuxianshang {
position: absolute;
right: 0;
/* margin-right: -5px; */
bottom: 15px;
height: 40px;
border-left: 1px solid red;
width: 1px;
}
.pointshang {
position: absolute;
border: 2px solid red;
border-radius: 2px;
bottom: -1px;
left: -2px;
}
.contentshang {
position: absolute;
top: -20px;
right: 0;
background-color: aqua;
white-space: nowrap;
border-radius: 15px;
padding: 0 5px;
/* transform: translate(); */
}
.point {
position: absolute;
border: 2px solid red;
border-radius: 2px;
top: -1px;
left: -2px;
}
.content {
position: absolute;
top: 45px;
/* left: 0; */
background-color: aqua;
white-space: nowrap;
border-radius: 15px;
padding: 0 5px;
/* transform: translate(); */
}
.leftclass {
/* margin-left: 300px; */
left: 0;
}
.rightclass {
/* riht: 0; */
right: 0;
}
</style>
</head>
<body>
<div id="app">{{baifenbi}}
<button @click="baifenbi+= 10">dianji</button>
<div class="box">
<div class="g-container" ref="containerpocess">
<div class="g-progress" :style="{width:baifenbi+'%'}">
<!-- 设置小竖条 -->
<div class="shuxian" :style="{}">
<div class="point"></div>
<!-- 设置竖条下的框 -->
<div class="content" ref="content" :style="bottomstyle">
预估退休后收入 ￥8,300</div>
</div>
</div>
<div class="shuxianshang">
<div class="pointshang"></div>
<!-- 设置竖条下的框 -->
<div class="contentshang">
预估退休后调整支出 ￥8,300</div>
</div>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
data: function () {
return {
baifenbi: 0,
shutiao: 0,
divwidth: '',
}
},
mounted () {
console.log(this.$refs.containerpocess.offsetWidth);
console.log(this)
},
watch: {
baifenbi: function (newval, oldval) {
console.log(oldval, newval);
newval = Math.max(4, newval)
newval = Math.min(100, newval)
middlePos = this.$refs.content.offsetWidth / 2
console.log(middlePos);
if (newval > 50) {
v = this.lerp(50, middlePos, 100, 0, newval)
console.log("v=", v)
this.bottomstyle = { 'right': 0 + 'px', 'margin-right': -v + 'px' }
} else {
v = this.lerp(4, 0, 50, middlePos, newval)
console.log("v=", v)
this.bottomstyle = { 'left': 0 + 'px', 'margin-left': -v + 'px' }
}
}
},
computed: {
// leftOrright () {
// // debugger
// if (parseInt(this.baifenbi) < 50) {
// return true
// } else {
// return false
// }
// }
},
methods: {
lerp (x0, y0, x1, y1, x) {
k = (y1 - y0) / (x1 - x0)
return y0 + (x - x0) * k
},
}
})
app.mount('#app')
</script>
</body>
</html>
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
