vue界面自动生成(Vue中实现3D标签云的详细代码)
类别:编程学习 浏览量:779
时间:2021-10-02 01:09:05 vue界面自动生成
Vue中实现3D标签云的详细代码预览:
代码:
页面部分:
<template> <li class="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="item.url" rel="external nofollow" :style="'color:' + item.color + ';top: 0;left: 0;filter:none;'">{{item.name}}</a> </li> </template>
CSS部分:
// 标签云 .tagcloud-all { position: relative; a { position: absolute; top: 0px; left: 0px; color: #fff; font-weight: bold; text-decoration: none; padding: 3px 6px; &:hover { color: #FF0000; letter-spacing: 2px; } } }
JS部分:
export default { name: "tagcloud", data() { return { tagList: [], radius: 120, dtr: Math.PI / 180, d: 300, mcList: [], active: false, lasta: 1, lastb: 1, distr: true, tspeed: 10, size: 250, mouseX: 0, mouseY: 0, howElliptical: 1, oList: null, oA: null, sa: 0, ca: 0, sb: 0, cb: 0, sc: 0, cc: 0 } }, methods: { // 生成随机数 getRandomNum() { return Math.floor(Math.random() * (255 + 1)); }, // 三角函数角度计算 sineCosine(a, b, c) { this.sa = Math.sin(a * this.dtr); this.ca = Math.cos(a * this.dtr); this.sb = Math.sin(b * this.dtr); this.cb = Math.cos(b * this.dtr); this.sc = Math.sin(c * this.dtr); this.cc = Math.cos(c * this.dtr); }, // 设置初始定位 positionAll() { this.$nextTick(() => { // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var phi = 0; var theta = 0; var max = this.mcList.length; var aTmp = []; var oFragment = document.createDocumentFragment(); // 随机排序 for (let i = 0; i < this.tagList.length; i++) { aTmp.push(this.oA[i]); } aTmp.sort(() => { return Math.random() < 0.5 ? 1 : -1; }); for (let i = 0; i < aTmp.length; i++) { oFragment.appendChild(aTmp[i]); } this.oList.appendChild(oFragment); for (let i = 1; i < max + 1; i++) { if (this.distr) { phi = Math.acos(-1 + (2 * i - 1) / max); theta = Math.sqrt(max * Math.PI) * phi; } else { phi = Math.random() * (Math.PI); theta = Math.random() * (2 * Math.PI); } // 坐标变换 this.mcList[i - 1].cx = this.radius * Math.cos(theta) * Math.sin(phi); this.mcList[i - 1].cy = this.radius * Math.sin(theta) * Math.sin(phi); this.mcList[i - 1].cz = this.radius * Math.cos(phi); this.oA[i - 1].style.left = this.mcList[i - 1].cx + this.oList.offsetWidth / 2 - this.mcList[i - 1].offsetWidth / 2 + 'px'; this.oA[i - 1].style.top = this.mcList[i - 1].cy + this.oList.offsetHeight / 2 - this.mcList[i - 1].offsetHeight / 2 + 'px'; } }) }, // 坐标更新 让标签动起来 update() { this.$nextTick(() => { // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var a; var b; if (this.active) { a = (-Math.min(Math.max(-this.mouseY, -this.size), this.size) / this.radius) * this.tspeed; b = (Math.min(Math.max(-this.mouseX, -this.size), this.size) / this.radius) * this.tspeed; } else { a = this.lasta * 0.98; b = this.lastb * 0.98; } this.lasta = a; this.lastb = b; if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return } var c = 0; this.sineCosine(a, b, c); for (var j = 0; j < this.mcList.length; j++) { var rx1 = this.mcList[j].cx; var ry1 = this.mcList[j].cy * this.ca + this.mcList[j].cz * (-this.sa); var rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca; var rx2 = rx1 * this.cb + rz1 * this.sb; var ry2 = ry1; var rz2 = rx1 * (-this.sb) + rz1 * this.cb; var rx3 = rx2 * this.cc + ry2 * (-this.sc); var ry3 = rx2 * this.sc + ry2 * this.cc; var rz3 = rz2; this.mcList[j].cx = rx3; this.mcList[j].cy = ry3; this.mcList[j].cz = rz3; var per = this.d / (this.d + rz3); this.mcList[j].x = (this.howElliptical * rx3 * per) - (this.howElliptical * 2); this.mcList[j].y = ry3 * per; this.mcList[j].scale = per; this.mcList[j].alpha = per; this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * (10 / 6); } this.doPosition(); this.depthSort(); }) }, // doPosition() { this.$nextTick(() => { // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var l = this.oList.offsetWidth / 2; var t = this.oList.offsetHeight / 2; for (var i = 0; i < this.mcList.length; i++) { this.oA[i].style.left = this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2 + 'px'; this.oA[i].style.top = this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2 + 'px'; this.oA[i].style.fontSize = Math.ceil(12 * this.mcList[i].scale / 2) + 8 + 'px'; // this.oA[i].style.filter = "alpha(opacity=" + 100 * this.mcList[i].alpha + ")"; this.oA[i].style.opacity = this.mcList[i].alpha; } }) }, // depthSort() { this.$nextTick(() => { // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var aTmp = []; for (let i = 0; i < this.oA.length; i++) { aTmp.push(this.oA[i]); } aTmp.sort(function (vItem1, vItem2) { if (vItem1.cz > vItem2.cz) { return -1; } else if (vItem1.cz < vItem2.cz) { return 1; } else { return 0; } }); for (let i = 0; i < aTmp.length; i++) { aTmp[i].style.zIndex = i; } }) }, // 网络请求 拿到tagList query() { // 假装从接口拿回来的数据 let tagListOrg = [ { name: '标签1', url: 'www.baidu.com' }, { name: '标签2', url: 'www.baidu.com' }, { name: '标签3', url: 'www.baidu.com' }, { name: '标签4', url: 'www.baidu.com' }, { name: '标签5', url: 'www.baidu.com' }, { name: '标签6', url: 'www.baidu.com' }, { name: '标签7', url: 'www.baidu.com' }, { name: '标签8', url: 'www.baidu.com' }, { name: '标签9', url: 'www.baidu.com' }, { name: '标签10', url: 'www.baidu.com' }, { name: '标签11', url: 'www.baidu.com' }, { name: '标签12', url: 'www.baidu.com' }, { name: '标签13', url: 'www.baidu.com' }, { name: '标签14', url: 'www.baidu.com' }, { name: '标签15', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签16', url: 'www.baidu.com' }, { name: '标签17', url: 'www.baidu.com' } ]; // 给tagList添加随机颜色 tagListOrg.forEach(item => { item.color = "rgb(" + this.getRandomNum() + "," + this.getRandomNum() + "," + this.getRandomNum() + ")"; }) this.tagList = tagListOrg; this.onReady(); }, // 生成标签云 onReady() { this.$nextTick(() => { this.oList = this.$refs.tagcloudall; this.oA = this.oList.getElementsByTagName('a') var oTag = null; for (var i = 0; i < this.oA.length; i++) { oTag = {}; oTag.offsetWidth = this.oA[i].offsetWidth; oTag.offsetHeight = this.oA[i].offsetHeight; this.mcList.push(oTag); } this.sineCosine(0, 0, 0); this.positionAll(); this.oList.onmouseover = () => { this.active = true; } this.oList.onmouseout = () => { this.active = false; } this.oList.onmousemove = (event) => { var oEvent = window.event || event; this.mouseX = oEvent.clientX - (this.oList.offsetLeft + this.oList.offsetWidth / 2); this.mouseY = oEvent.clientY - (this.oList.offsetTop + this.oList.offsetHeight / 2); this.mouseX /= 5; this.mouseY /= 5; } setInterval(() => { this.update() }, 30); // 定时器执行 不能写setInterval(this.update(), 30) }) } }, created() { this.$nextTick(() => { this.query(); }) } }
到此这篇关于Vue中实现3D标签云的文章就介绍到这了,更多相关Vue 3D标签云内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- mongovue的使用
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue购物车简单项目(vue实现简单购物车案例)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
热门推荐
- pythonselenium自动化教程(python使用selenium实现批量文件下载)
- 小程序数字化怎么布局(用position:sticky完美解决小程序吸顶问题的实现方法)
- Javascript计算密码的强度
- dedecms网站二次开发教程(DEDECMS实现自定义表单模型分步提交实现思路)
- laravel框架运行找不到视图(解决laravel资源加载路径设置的问题)
- 私有云服务器是什么意思(私有云服务器选择配置的依据是什么?)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- iis7安全设置(IIS7 IIS8 http自动跳转到HTTPS80端口跳转443端口)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- python 正则表达式菜鸟教程(详解Python正则表达式re模块)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9