欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)氣泡運(yùn)動撞擊效果

 更新時間：2022年08月30日 16:29:13   作者：依賴_賴  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)氣泡運(yùn)動撞擊效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)氣泡運(yùn)動撞擊效果的具體代碼，供大家參考，具體內(nèi)容如下

封裝組件

<template>
? <ul id="main">
? ? <li v-for="(item, index) in circleData" :key="index" :class="{'active': item.is_latest_sign_user}">
? ? ? <div>
? ? ? ? <span>{{ item.nick_name }}</span>
? ? ? ? <span>簽到</span>
? ? ? </div>
? ? </li>
? </ul>
</template>

<script>

export default {
? data() {
? ? return {
? ? ? circleData: [],
? ? ? circleDom: [],
? ? ? circleArr: [],
? ? ? //初始化運(yùn)動的最大寬和高，初始定義0
? ? ? maxW: 0,
? ? ? maxH: 0,
? ? ? timer: null,
? ? ? timerArr: [],
? ? ? count: 0,
? ? };
? },
? mounted() {
? ? this.getLatest_sign_users('init')
? ? this.timer = setInterval((i) => {
? ? ? this.count++
? ? ? this.getLatest_sign_users()
? ? }, 5000)
? },
? methods: {
? ? getLatest_sign_users(type = '') {
? ? ? let data = []
? ? ? // nick_name: 用戶名
? ? ? // is_latest_sign_user: 是否是新簽到用戶
? ? ? // gender: 0-女 1-男
? ? ? if (this.count === 0) {
? ? ? ? data = [
? ? ? ? ? {
? ? ? ? ? ? id: '1',
? ? ? ? ? ? nick_name: '蕭一',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '楊二',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '張三',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? }
? ? ? ? ]
? ? ? } else if (this.count === 1) {
? ? ? ? data = [
? ? ? ? ? {
? ? ? ? ? ? nick_name: '蕭一',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '楊二',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '張三',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '李四',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '王五',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '徐六',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '劉七',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? }
? ? ? ? ]
? ? ? } else if (this.count === 2) {
? ? ? ? data = [
? ? ? ? ? {
? ? ? ? ? ? nick_name: '蕭一',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '楊二',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '張三',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '李四',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '王五',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '徐六',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '劉七',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '何八',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '柳九',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '甄十',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '十一',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '十二',
? ? ? ? ? ? is_latest_sign_user: true,
? ? ? ? ? ? gender: 1
? ? ? ? ? }
? ? ? ? ]
? ? ? } else {
? ? ? ? data = [
? ? ? ? ? {
? ? ? ? ? ? nick_name: '蕭一',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '楊二',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '張三',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '李四',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '王五',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '徐六',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '劉七',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '何八',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '柳九',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 0
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '甄十',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '十一',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? nick_name: '十二',
? ? ? ? ? ? is_latest_sign_user: false,
? ? ? ? ? ? gender: 1
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? ? this.circleData = [...data]
? ? ? if (type === 'init') {//初次加載時默認(rèn)全是新增簽到用戶
? ? ? ? data.forEach(item => item.is_latest_sign_user = true)
? ? ? }
? ? ? this.$nextTick(() => {
? ? ? ? if (data.length) {
? ? ? ? ? this.initBubble()
? ? ? ? }
? ? ? })
? ? },
? ? initBubble() {
? ? ? let main = document.getElementById("main");
? ? ? let divDom = main.getElementsByClassName("active"); //獲取新增加的dom
? ? ? if (!divDom.length) return;

? ? ? //清理每個球得定時器
? ? ? this.timerArr.forEach(item => {
? ? ? ? clearInterval(item)
? ? ? })
? ? ? this.timerArr = []

?? ? ?//給新增加的dom設(shè)置寬高
? ? ? for (let i = 0; i < divDom.length; i++) {
? ? ? ? let colors = [
? ? ? ? ? "#EF250A",
? ? ? ? ? "#830AF6"
? ? ? ? ];
? ? ? ? divDom[i].style.boxShadow = "0 0 20px" + " " + colors[this.circleData[i].gender] + " " + "inset";
? ? ? ? // 10個以上尺寸變小
? ? ? ? divDom[i].style.width = "46px";
? ? ? ? divDom[i].style.height = "46px";
? ? ? ? divDom[i].style.fontSize = "12px";
? ? ? ? divDom[i].style.lineHeight = "16px";
? ? ? ? this.circleDom.push(divDom[i])
? ? ? }

? ? ? //根據(jù)瀏覽器窗口的大小自動調(diào)節(jié)小球的運(yùn)動空間
? ? ? window.onresize = () => {
? ? ? ? this.maxW = main.clientWidth - divDom[0].clientWidth; //為了讓小球不卡在瀏覽器邊緣
? ? ? ? this.maxH = main.clientHeight - divDom[0].clientHeight; // 所以要減去自身的寬高
? ? ? };
? ? ? onresize();

? ? ? //數(shù)組對象的初始化
? ? ? for (let i = 0; i < this.circleDom.length; i++) {
? ? ? ? let obj = {};
? ? ? ? console.log(this.circleDom[i]);
? ? ? ? if (this.circleDom[i].getAttribute("class") === 'active') {
? ? ? ? ? obj.x = Math.floor(Math.random() * (this.maxW + 1)); //初始x坐標(biāo)
? ? ? ? ? obj.y = Math.floor(Math.random() * (this.maxH + 1)); //初始y坐標(biāo)
? ? ? ? ? obj.cx = obj.x + this.circleDom[0].offsetWidth / 2;//圓心x坐標(biāo)
? ? ? ? ? obj.cy = obj.y + this.circleDom[0].offsetHeight / 2;//圓心y坐標(biāo)
? ? ? ? ? obj.movex = Math.floor(Math.random() * 2); //x軸移動方向
? ? ? ? ? obj.movey = Math.floor(Math.random() * 2); //y軸移動方向
? ? ? ? ? obj.speed = 0.2; //隨機(jī)速度
? ? ? ? ? obj.timer = null; //計時器
? ? ? ? ? obj.index = i; //索引值
? ? ? ? ? this.circleArr.push(obj)
? ? ? ? ? //小球位置初始化
? ? ? ? ? this.circleDom[i].style.left = obj.x + 'px';
? ? ? ? ? this.circleDom[i].style.top = obj.y + 'px';
? ? ? ? } else {
? ? ? ? ? //保留之前數(shù)據(jù)得位置信息，不刷新位置
? ? ? ? ? obj = this.circleArr[i]
? ? ? ? }
? ? ? ? this.move(obj);
? ? ? }
? ? },

? ? //移動函數(shù)
? ? move(balls) {
? ? ? //每個球單獨(dú)有定時器
? ? ? balls.timer = setInterval(() => {
? ? ? ? if (balls.movex === 1) {
? ? ? ? ? //如果往右跑，則一直加速度，碰到邊界，改為反方向運(yùn)動
? ? ? ? ? balls.x += balls.speed;
? ? ? ? ? if (balls.x + balls.speed >= this.maxW) {
? ? ? ? ? ? //防止小球出界
? ? ? ? ? ? balls.x = this.maxW;
? ? ? ? ? ? balls.movex = 0; //小球運(yùn)動方向發(fā)生改變
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? balls.x -= balls.speed; // 1和0表示正反方向
? ? ? ? ? if (balls.x - balls.speed <= 0) {
? ? ? ? ? ? balls.x = 0;
? ? ? ? ? ? balls.movex = 1;
? ? ? ? ? }
? ? ? ? }
? ? ? ? if (balls.movey === 1) {
? ? ? ? ? balls.y += balls.speed;
? ? ? ? ? if (balls.y + balls.speed >= this.maxH) {
? ? ? ? ? ? balls.y = this.maxH;
? ? ? ? ? ? balls.movey = 0;
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? balls.y -= balls.speed;
? ? ? ? ? if (balls.y - balls.speed <= 0) {
? ? ? ? ? ? balls.y = 0;
? ? ? ? ? ? balls.movey = 1;
? ? ? ? ? }
? ? ? ? }
? ? ? ? if (this.circleDom[balls.index]) {
? ? ? ? ? balls.cx = balls.x + this.circleDom[0].offsetWidth / 2;//小球圓心等于：運(yùn)動中x的值加上自身的半徑
? ? ? ? ? balls.cy = balls.y + this.circleDom[0].offsetHeight / 2;
? ? ? ? ? this.circleDom[balls.index].style.left = balls.x + "px"; //小球相對于屏幕的位置
? ? ? ? ? this.circleDom[balls.index].style.top = balls.y + "px";
? ? ? ? ? this.crash(balls.index); //每個小球進(jìn)行碰撞檢測
? ? ? ? }
? ? ? }, 25);
? ? ? this.timerArr.push(balls.timer)
? ? },
? ? //碰撞函數(shù)
? ? crash(a) {
? ? ? let container = [...this.circleArr]
? ? ? let ball1x = container[a].cx; //在數(shù)組中任意球的圓心坐標(biāo)
? ? ? let ball1y = container[a].cy;//思路：先隨便拿一個球，然后遍歷所有球，拿這個球和所有球的圓心距離比較
? ? ? for (let i = 0; i < container.length; i++) {
? ? ? ? if (i !== a) { //判斷取出來的球不是本身，才能和其他球進(jìn)行距離判斷
? ? ? ? ? let ball2x = container[i].cx; //將其他球的圓心坐標(biāo)賦值給球2
? ? ? ? ? let ball2y = container[i].cy;
? ? ? ? ? //圓心距 求兩個點(diǎn)之間的距離,開平方
? ? ? ? ? let distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
? ? ? ? ? if (distence <= this.circleDom[0].offsetWidth) { //球心距離和求直徑比較
? ? ? ? ? ? if (ball1x > ball2x) { //當(dāng)前位于未知求的右方
? ? ? ? ? ? ? if (ball1y > ball2y) {//預(yù)設(shè)未知球撞當(dāng)前球，然后當(dāng)前球改變運(yùn)動
? ? ? ? ? ? ? ? container[a].movex = 1; //1表示為正值，對應(yīng)的右和下
? ? ? ? ? ? ? ? container[a].movey = 1;//0表示為負(fù)值，對應(yīng)的左和上
? ? ? ? ? ? ? } else if (ball1y < ball2y) {
? ? ? ? ? ? ? ? container[a].movex = 1;
? ? ? ? ? ? ? ? container[a].movey = 0;
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? container[a].movex = 1;
? ? ? ? ? ? ? }
? ? ? ? ? ? } else if (ball1x < ball2x) {
? ? ? ? ? ? ? if (ball1y > ball2y) {
? ? ? ? ? ? ? ? container[a].movex = 0;
? ? ? ? ? ? ? ? container[a].movey = 0;
? ? ? ? ? ? ? } else if (ball1y < ball2y) {
? ? ? ? ? ? ? ? container[a].movex = 0;
? ? ? ? ? ? ? ? container[a].movey = 1;
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? container[a].movex = 0;
? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? if (ball1y > ball2y) {
? ? ? ? ? ? ? ? container[a].movey = 1;
? ? ? ? ? ? ? } else if (ball1y < ball2y) {
? ? ? ? ? ? ? ? container[a].movey = 0;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? },
? beforeDestroy() {
? ? //清理每個球得定時器
? ? this.timerArr.forEach(item => {
? ? ? clearInterval(item)
? ? })
? ? //清理簽到數(shù)據(jù)
? ? clearInterval(this.timer)
? }
};
</script>
<style lang='less' scoped>
#main {
? position: relative;
? width: 100%;
? height: 100%;
? overflow: hidden;
? padding: 0;

? li {
? ? position: absolute;
? ? overflow: hidden;
? ? -moz-border-radius: 50%;
? ? -webkit-border-radius: 50%;
? ? border-radius: 50%;
? ? display: flex;
? ? align-items: center;
? ? justify-content: center;
? ? flex-wrap: wrap;

? ? &.active {
? ? ? animation: scaleBox 1s 1;
? ? }

? ? @keyframes scaleBox {
? ? ? 0% {
? ? ? ? transform: scale(1);
? ? ? }
? ? ? 50% {
? ? ? ? transform: scale(1.2);
? ? ? }
? ? ? 100% {
? ? ? ? transform: scale(1);
? ? ? }
? ? }

? ? div {
? ? ? span {
? ? ? ? display: block;
? ? ? ? width: 100%;
? ? ? ? color: #fff;
? ? ? ? text-align: center;
? ? ? }
? ? }
? }
}
</style>

實(shí)現(xiàn)效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論