3D标签云/滚动词条
2024-05-21 12:28:07
vue：
<!DOCTYPE html>
<html>
<head><title>svg3D标签云</title><script src="https://cdn.bootcss.com/vue/2.2.0/vue.min.js"></script>
</head>
<body>
<div id='app' ><svg :width='width' :height='height' @mousemove='listener($event)'><a :href="tag.href" v-for='tag in tags'><text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text></a></svg>
</div>
<script>var app = new Vue({el: '#app',data: {width:700,height:700,tagsNum:20,RADIUS:200,speedX:Math.PI/360,speedY:Math.PI/360,tags: [],colors:[],},computed:{CX(){return this.width/2;},CY(){return this.height/2;}},created(){this.changeColors();//初始化标签位置let tags=[];for(let i = 0; i < this.tagsNum; i++){let tag = {};let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;let a = Math.acos(k);let b = a * Math.sqrt(this.tagsNum * Math.PI)tag.text = i + 'tag';tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);tag.z = this.RADIUS * Math.cos(a);tag.href = 'https://imgss.github.io'tags.push(tag)}this.tags = tags;},mounted(){//使球开始旋转setInterval(()=>{this.rotateX(this.speedX);this.rotateY(this.speedY);}, 17)},methods:{rotateX(speedX){var cos = Math.cos(speedX);var sin = Math.sin(speedX);for(let tag of this.tags){var y1 = (tag.y- this.CY) * cos - tag.z * sin + this.CY;var z1 = tag.z * cos + (tag.y- this.CY) * sin;tag.y = y1;tag.z = z1;}},rotateY(speedY){var cos = Math.cos(speedY);var sin = Math.sin(speedY);for(let tag of this.tags){var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;var z1 = tag.z * cos + (tag.x - this.CX) * sin;tag.x = x1;tag.z = z1;}},listener(event){//响应鼠标移动var x = event.clientX - this.CX;var y = event.clientY - this.CY;this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-this.RADIUS*0.00002, x*0.0001);this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-this.RADIUS*0.00002, y*0.0001);},changeColors(){for(var i = 0;i<30;i++){var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);this.colors[i] = "rgb(" + r + ',' + g + ',' + b + ")";}},}})
</script>
</body>
</html>
no vue：
<!DOCTYPE html>
<html>
<head><title>svg3D标签云</title>
</head>
<body>
<svg width='700' height='700'><a href="https://www.baidu.com"><text x='10' y='12'>1222</text></a><text x='100' y='120'>weed</text><text x='120' y='152'>sdcc</text><text x='160' y='222'>dfdf</text><text x='60' y='92'>vbbb</text><text x='160' y='300'>evvv</text><text x='290' y='400'>hhhh</text><text x='633' y='300'>wrgg</text><text x='400' y='500'>ohhh</text><text x='320' y='400'>qvbn</text><text x='480' y='200'>rvbj</text><text x='303' y='120'>eghj</text><text x='100' y='120'>weed</text><text x='120' y='152'>sdcc</text><text x='160' y='222'>dfdf</text><text x='60' y='92'>vbbb</text><text x='160' y='300'>evvv</text><text x='290' y='400'>hhhh</text><text x='633' y='300'>wrgg</text><text x='400' y='500'>ohhh</text><text x='320' y='400'>qvbn</text><text x='480' y='200'>rvbj</text><text x='303' y='120'>eghj</text>
</svg>
<script>var paper = document.querySelector("svg");//svgtags = document.querySelectorAll('svg text');RADIUS =200,FONTSIZE = RADIUS*0.1,fallLength = 600,//焦距tagArr=[],angleX = Math.PI/300,angleY = Math.PI/300,CX = paper.getAttribute('width')/2,//球心坐标CY = paper.getAttribute('height')/2;//球心坐标function Tag(ele , x , y , z){this.ele = ele;this.x = x;this.y = y;this.z = z;}function init(){var len = tags.lengthfor(var i=0;i<len;i++){var a , b;var k = -1+(2*(i+1)-1)/len;var a = Math.acos(k);var b = a*Math.sqrt(len*Math.PI);// var a = Math.random()*2*Math.PI;// var b = Math.random()*2*Math.PI;var x =CX + RADIUS * Math.sin(a) * Math.cos(b);var y =CY + RADIUS * Math.sin(a) * Math.sin(b);var z = RADIUS * Math.cos(a);var t = new Tag(tags[i] , x , y , z);tags[i].setAttribute('x',x);tags[i].setAttribute('y',y);tags[i].setAttribute('font-size', FONTSIZE * (fallLength/(fallLength-this.z)));tags[i].setAttribute('fill', "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")")tagArr.push(t);}}Array.prototype.forEach = function(callback){for(var i=0;i<this.length;i++){callback.call(this[i]);}}function animate(){setInterval(function(){// angleY += Math.PI/300;// angleY = angleX>Math.PI? 0 : angleXrotateX();rotateY();} , 17);}function rotateX(){var cos = Math.cos(angleX);var sin = Math.sin(angleX);tagArr.forEach(function(){var y1 = (this.y-CY) * cos - this.z * sin +CY;var z1 = this.z * cos + (this.y-CY) * sin;this.y = y1;this.z = z1;this.ele.setAttribute('y',this.y)this.ele.setAttribute('font-size', FONTSIZE * (fallLength/(fallLength-this.z)));})}function rotateY(){var cos = Math.cos(angleY);var sin = Math.sin(angleY);tagArr.forEach(function(){var x1 = (this.x-CX) * cos - this.z * sin +CX;var z1 = this.z * cos + (this.x-CX) * sin;this.x = x1;this.z = z1;this.ele.setAttribute('x',this.x)this.ele.setAttribute('font-size', FONTSIZE * (fallLength/(fallLength-this.z)));})}paper.addEventListener("mousemove" , function(event){var x = event.clientX - CX;var y = event.clientY - CY;// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);angleY = x*0.0001>0 ? Math.min(RADIUS*0.00002,x*0.0001) : Math.max(-RADIUS*0.00002,x*0.0001);angleX = y*0.0001>0 ? Math.min(RADIUS*0.00002,y*0.0001) : Math.max(-RADIUS*0.00002,y*0.0001);});init();animate();</script>
</body>
</html>
canvas：
https://github.com/goat1000/TagCanvas
原理:
https://www.cnblogs.com/axes/p/3501424.html
参考:
https://github.com/imgss/imgss.github.io/tree/master/demo/svg
3D标签云/滚动词条相关推荐
- 3D标签云效果的实现
一．关于3D标签云 TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动. GitHub中的链接地址:https ...
- [HTML5]3D标签云
index.html <html> <head> <meta http-equiv="Content-Type" content="text ...
- 3D标签云的简单实现
3D标签云的实现 最近在做一些小Demo,看到了3D标签云觉得很酷炫,就学着做了一下.虽然看起来有点难,但是分解了看其实还是很普通的js运动的实现. 效果预览https://chestnut647.g ...
- 基于HTML5 SVG可互动的3D标签云jQuery插件
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件.该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观. 效果演示 ...
- css标签3d,超酷的js+css3实现的3D标签云特效
此作品是一款超酷的3D标签云 核心功能代码如下: function doPosition(){ var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHei ...
- 微信小程序模仿快播标签云滚动特效
说到快播,故事肯定就不少.用过的人都知道快播首页有个标签云的特效效果,就是渐隐渐显外加上下滚动,其实还挺好看的.至于其他故事嘛,因为没有酒,所以,还是来说说代码吧~ 一开始不是做这个特效需求,但因为在 ...
- js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
- 祝福版的3D标签云动画特效
文章目录 实现效果 源码 实现效果 实现效果: 源码 <!DOCTYPE html> <html lang="en"> <head><me ...
- vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
最新文章
- WCF Data Service 的.NET Client 的不支持原生类型服务操作的解决方法
- python selenium 三种等待方式详解
- Day11多态部分-6 【1.3 对象的向上转型和向下转型】
- 2010年 Web的五项技术和五个趋势
- (王道408考研数据结构)第一章绪论-第一节：数据结构的基本概念、三要素、逻辑结构和物理结构
- 硅谷Web 2.0时代即将结束? 实用型公司更受关注
- 使用JDBC来连接数据库
- 小程序 php wecahtpay,【PHP】laravel 实现微信小程序微信支付功能
- 提高代码的运行效率 （3）
- oracle让数据库不产生redo,imp过程如何减少redo产生
- 程序员的职业生涯像一盘棋 行棋者由谁？
- MySQL学习笔记：一道group by+group_concat解决的小问题
- 电子设计大赛-信号源类题目分析
- 英国外交部翻译教你实用口语课，让你飚出一口地道、流利英语
- 【可爱甜美圆嘟嘟的孩子壁纸】
- CSP202109-4 收集卡牌
- python爬虫学习笔记一：网络爬虫入门
- python的分支语句if基本用法
- Source Insight 4.0 大佬风格主题搭配风格
- 基于PEview分析PE文件（4-3）