3d標簽云實現過程（tagcloud.js）同步原生和 vue

寫在前面

本來是沒有準備寫這個知識點，但是下載這個 js 的時候發現很多都是要錢或者是積分的，我就不明白了一個開源了這么久的 js 怎么還有人拿來掙錢的，同時還有一些只有原生 html 的例子，但是現在都是 框架主導的一些項目，顯然是不行的，這篇文章就簡單的寫一下 怎么使用原生和 vue 分別使用 tagcloudjs 實現標簽云，喜歡的可以直接拿去用，當然你也可以直接參考這個的例子寫，我沒有試過，但是 demo 是可行的tagcloudjs. 當然防止你們下載失敗，我最后面會將源碼貼出來，直接用就可以了，但是 vue 實現的和原生實現的 js 有一點點的差別，因為原來的 tagcloudjs 無法給 vue 使用。

結果展示

大概就是下面這個樣子
在這里插入圖片描述

原生代碼實現
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="wrapper"><div class="tagcloud fl"><span id="pagetext">CSDN 玩家 1</span><span id="pagetext">CSDN 玩家 2</span><span id="pagetext">CSDN 玩家 3</span><span id="pagetext">CSDN 玩家 4</span><span id="pagetext">CSDN 玩家 5</span><span id="pagetext">CSDN 玩家 6</span><span id="pagetext">CSDN 玩家 7</span><span id="pagetext">CSDN 玩家 8</span><span id="pagetext">CSDN 玩家 9</span></div></div><script src="../assets/js/tagcloud.js"></script><script>tagcloud({selector: '.tagcloud', //元素選擇器fontsize: 16, //基本字體大小, 單位pxradius: 100, //滾動半徑, 單位pxmspeed: 'normal', //滾動最大速度, 取值: slow, normal(默認), fastispeed: 'normal', //滾動初速度, 取值: slow, normal(默認), fastdirection: 135, //初始滾動方向, 取值角度(順時針360): 0對應top, 90對應left, 135對應right-bottom(默認)...keep: false //鼠標移出組件后是否繼續隨鼠標滾動, 取值: false, true(默認) 對應 減速至初速度滾動, 隨鼠標滾動});</script></body><style>.wrapper {width: 50%;height: 300px;margin: 0 auto;margin-top: 70px;}.tagcloud {position: relative;margin-top: 0px;}.tagcloud span {position: absolute;top: 0;left: 0;cursor: pointer;display: block;padding: 11px 30px;color: #60A2FF;font-size: 16px;border: 1px solid #e6e7e8;border-radius: 18px;background-color: #f2f4f8;text-decoration: none;white-space: nowrap;-o-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);-ms-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);-moz-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);-webkit-box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);box-shadow: 6px 4px 8px 0 rgba(151, 142, 136, .34);-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";/*兼容ie7/8*/filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);/*strength是陰影大小，direction是陰影方位，單位為度，可以為負數，color是陰影顏色 （盡量使用數字）使用IE濾鏡實現盒子陰影的盒子必須是行元素或以行元素顯示（block或inline-block;）*/}.tagcloud a:hover {color: #3385cf;}</style>
</html>
給原生 HTML 實現用的tagcloud.js源碼
/*
* 3d標簽云
* 功能：鼠標移入標簽，當前標簽靜止放大
* 說明：
* */window.tagcloud = (function(win, doc) { // ns// 判斷對象function isObject (obj) {return Object.prototype.toString.call(obj) === '[object Object]';}// 構造函數function TagCloud (options) {var self = this;self.config = TagCloud._getConfig(options);self.box = self.config.element;   //組件元素self.fontsize = self.config.fontsize; //平均字體大小self.radius = self.config.radius; //滾動半徑self.depth = 2 * self.radius;   //滾動深度self.size = 2 * self.radius;    //隨鼠標滾動變速作用區域self.mspeed = TagCloud._getMsSpeed(self.config.mspeed);self.ispeed = TagCloud._getIsSpeed(self.config.ispeed);self.items = self._getItems();self.direction = self.config.direction;   //初始滾動方向self.keep = self.config.keep; //鼠標移出后是否保持之前滾動//初始化self.active = false;   //是否為激活狀態self.lasta = 1;self.lastb = 1;self.mouseX0 = self.ispeed * Math.sin(self.direction * Math.PI / 180);    //鼠標與滾動圓心x軸初始距離self.mouseY0 = -self.ispeed * Math.cos(self.direction * Math.PI / 180);   //鼠標與滾動圓心y軸初始距離self.mouseX = self.mouseX0;   //鼠標與滾動圓心x軸距離self.mouseY = self.mouseY0;   //鼠標與滾動圓心y軸距離self.index = -1;//鼠標移入TagCloud._on(self.box, 'mouseover', function () {self.active = true;});//鼠標移出TagCloud._on(self.box, 'mouseout', function () {self.active = false;});//鼠標在內移動TagCloud._on(self.keep ? win : self.box, 'mousemove', function (ev) {var oEvent = win.event || ev;var boxPosition = self.box.getBoundingClientRect();self.mouseX = (oEvent.clientX - (boxPosition.left + self.box.offsetWidth / 2)) / 5;self.mouseY = (oEvent.clientY - (boxPosition.top + self.box.offsetHeight / 2)) / 5;});for (var j = 0, len = self.items.length; j < len; j++) {self.items[j].element.index=j;//鼠標移出子元素,當前元素靜止放大self.items[j].element.onmouseover = function(){self.index = this.index;};//鼠標移出子元素,當前元素繼續滾動self.items[j].element.onmouseout = function(){self.index = -1;};}//定時更新TagCloud.boxs.push(self.box);self.update(self);    //初始更新self.box.style.visibility = "visible";self.box.style.position = "relative";self.box.style.minHeight = 1.2 * self.size + "px";self.box.style.minWidth = 2.5 * self.size + "px";for (var j = 0, len = self.items.length; j < len; j++) {self.items[j].element.style.position = "absolute";self.items[j].element.style.zIndex = j + 1;}self.up = setInterval(function() {self.update(self);}, 30);}//實例TagCloud.boxs = []; //實例元素數組// 靜態方法們TagCloud._set = function (element) {if (TagCloud.boxs.indexOf(element) == -1) {//ie8不支持數組的indexOf方法return true;}};//添加數組IndexOf方法if (!Array.prototype.indexOf){Array.prototype.indexOf = function(elt /*, from*/){var len = this.length >>> 0;var from = Number(arguments[1]) || 0;from = (from < 0)? Math.ceil(from): Math.floor(from);if (from < 0)from += len;for (; from < len; from++){if (from in this && this[from] === elt)return from;}return -1;};}TagCloud._getConfig = function (config) {var defaultConfig = {   //默認值fontsize: 16,       //基本字體大小, 單位pxradius: 60,         //滾動半徑, 單位pxmspeed: "normal",   //滾動最大速度, 取值: slow, normal(默認), fastispeed: "normal",   //滾動初速度, 取值: slow, normal(默認), fastdirection: 135,     //初始滾動方向, 取值角度(順時針360): 0對應top, 90對應left, 135對應right-bottom(默認)...keep: true          //鼠標移出組件后是否繼續隨鼠標滾動, 取值: false, true(默認) 對應 減速至初速度滾動, 隨鼠標滾動};if(isObject(config)) {for(var i in config) {if(config.hasOwnProperty(i)) {//hasOwnProperty()用來判斷一個屬性是定義在對象本身而不是繼承自原型鏈defaultConfig[i] = config[i]; //用戶配置}}}return defaultConfig;// 配置 Merge};TagCloud._getMsSpeed = function (mspeed) {    //滾動最大速度var speedMap = {slow: 1.5,normal: 3,fast: 5};return speedMap[mspeed] || 3;};TagCloud._getIsSpeed = function (ispeed) {    //滾動初速度var speedMap = {slow: 10,normal: 25,fast: 50};return speedMap[ispeed] || 25;};TagCloud._getSc = function(a, b) {var l = Math.PI / 180;//數組順序0,1,2,3表示asin,acos,bsin,bcosreturn [Math.sin(a * l),Math.cos(a * l),Math.sin(b * l),Math.cos(b * l)];};TagCloud._on = function (ele, eve, handler, cap) {if (ele.addEventListener) {ele.addEventListener(eve, handler, cap);} else if (ele.attachEvent) {ele.attachEvent('on' + eve, handler);} else {ele['on' + eve] = handler;}};// 原型方法TagCloud.prototype = {constructor: TagCloud, // 反向引用構造器update: function () {var self = this, a, b;if (!self.active && !self.keep) {self.mouseX = Math.abs(self.mouseX - self.mouseX0) < 1 ? self.mouseX0 : (self.mouseX + self.mouseX0) / 2;   //重置鼠標與滾動圓心x軸距離self.mouseY = Math.abs(self.mouseY - self.mouseY0) < 1 ? self.mouseY0 : (self.mouseY + self.mouseY0) / 2;   //重置鼠標與滾動圓心y軸距離}a = -(Math.min(Math.max(-self.mouseY, -self.size), self.size) / self.radius ) * self.mspeed;b = (Math.min(Math.max(-self.mouseX, -self.size), self.size) / self.radius ) * self.mspeed;if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; }self.lasta = a;self.lastb = b;var sc = TagCloud._getSc(a, b);for (var j = 0, len = self.items.length; j < len; j++) {var rx1 = self.items[j].x,ry1 = self.items[j].y*sc[1] + self.items[j].z*(-sc[0]),rz1 = self.items[j].y*sc[0] + self.items[j].z*sc[1];var rx2 = rx1 * sc[3] + rz1 * sc[2],ry2 = ry1,rz2 = rz1 * sc[3] - rx1 * sc[2];if(self.index==j){self.items[j].scale = 1; //取值范圍0.6 ~ 3self.items[j].fontsize = 16;self.items[j].alpha = 1;self.items[j].element.style.zIndex = 99;}else{var per = self.depth / (self.depth + rz2);self.items[j].x = rx2;self.items[j].y = ry2;self.items[j].z = rz2;self.items[j].scale = per; //取值范圍0.6 ~ 3self.items[j].fontsize = Math.ceil(per * 2) + self.fontsize - 6;self.items[j].alpha = 1.5 * per - 0.5;self.items[j].element.style.zIndex = Math.ceil(per*10-5);}self.items[j].element.style.fontSize = self.items[j].fontsize + "px";self.items[j].element.style.left = self.items[j].x + (self.box.offsetWidth - self.items[j].offsetWidth) / 2 + "px";self.items[j].element.style.top = self.items[j].y + (self.box.offsetHeight - self.items[j].offsetHeight) / 2 + "px";self.items[j].element.style.filter = "alpha(opacity=" + 100 * self.items[j].alpha + ")";self.items[j].element.style.opacity = self.items[j].alpha;}},_getItems: function () {var self = this,items = [],element = self.box.children, // children 全部是Elementlength = element.length,item;for (var i = 0; i < length; i++) {item = {};item.angle = {};item.angle.phi = Math.acos(-1 + (2 * i + 1) / length);item.angle.theta = Math.sqrt((length + 1) * Math.PI) * item.angle.phi;item.element = element[i];item.offsetWidth = item.element.offsetWidth;item.offsetHeight = item.element.offsetHeight;item.x = self.radius * 1.5 * Math.cos(item.angle.theta) * Math.sin(item.angle.phi);item.y = self.radius * 1.5 * Math.sin(item.angle.theta) * Math.sin(item.angle.phi);item.z = self.radius * 1.5 * Math.cos(item.angle.phi);item.element.style.left = item.x + (self.box.offsetWidth - item.offsetWidth) / 2 + "px";item.element.style.top = item.y + (self.box.offsetHeight - item.offsetHeight) / 2 + "px";items.push(item);}return items;   //單元素數組}};if (!doc.querySelectorAll) {//ie7不支持querySelectorAll，所以要重新定義doc.querySelectorAll = function (selectors) {var style = doc.createElement('style'), elements = [], element;doc.documentElement.firstChild.appendChild(style);doc._qsa = [];style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';window.scrollBy(0, 0);style.parentNode.removeChild(style);while (doc._qsa.length) {element = doc._qsa.shift();element.style.removeAttribute('x-qsa');elements.push(element);}doc._qsa = null;return elements;};}return function (options) { // factoryoptions = options || {}; // 短路語法var selector = options.selector || '.tagcloud', //默認選擇class為tagcloud的元素elements = doc.querySelectorAll(selector),instance = [];for (var index = 0, len = elements.length; index < len; index++) {options.element = elements[index];if (!!TagCloud._set(options.element)) {instance.push(new TagCloud(options));}}return instance;};})(window, document);
vue 實現
<template><div class="tagcloud"><span v-for="i in 10">CSDN 玩家{{ i}}</span></div>
</template><script setup>import { onMounted } from 'vue';import { tagcloud } from '../../src/assets/tagcloud.js'onMounted(() => {tagcloud({selector: '.tagcloud', //元素選擇器fontsize: 16, //基本字體大小, 單位pxradius: 100, //滾動半徑, 單位pxmspeed: 'normal', //滾動最大速度, 取值: slow, normal(默認), fastispeed: 'normal', //滾動初速度, 取值: slow, normal(默認), fastdirection: 135, //初始滾動方向, 取值角度(順時針360): 0對應top, 90對應left, 135對應right-bottom(默認)...keep: false //鼠標移出組件后是否繼續隨鼠標滾動, 取值: false, true(默認) 對應 減速至初速度滾動, 隨鼠標滾動});})
</script>
  • style 同原生的一致，這里不貼代碼了，避免文章太長你們看著煩
給 vue 實現用的 tagcloud.js
export const tagcloud = (function (win = window, doc = document)

將原生js 中的第一行代碼改為上面的即可，將 tagcloud 導出去就可以給 vue 直接使用了，這里需要注意的一點是用的時候需要保證頁面DOM 元素全部加載結束再執行 tagcloud 的方法，否則是無法加載出來的，這個和 echartsjs 用法是保持一致的，因為這些圖形類的 js 使用的前提條件就是你的 DOM 元素需要存在，否則都是徒勞，當你沒有效果的時候檢查一下是不是 DOM 加載失敗了或者是沒有加載出來即可

寫在后面

以上就是關于 tagcloudjs 用法的講解了，整好最近我手里有需求需要用到這塊，順手將這個分享出去，大家用的時候有什么問題隨時下面留言即可！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160573.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160573.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160573.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【Exception】Error: Dynamic require of “path“ is not supported

【Exception】Error: Dynamic require of “path“ is not supported

Talk is cheap, show me the code. 環境 | Environment kversionOSwindows 11Node.jsv18.14.2npm9.5.0vite5.0.0vue3.3.8 報錯日志 | Error log >npm run dev> app10.0.0 dev > viteERROR failed to load config from C:\code\frontend\app1\vite.config.js …
閱讀更多...
【LeetCode二叉樹進階題目】606，102，107

【LeetCode二叉樹進階題目】606，102，107

二叉樹進階題目 606. 根據二叉樹創建字符串解題思路及實現 102. 二叉樹的層序遍歷解題思路及實現 107. 二叉樹的層序遍歷 II解題思路及實現 606. 根據二叉樹創建字符串 描述 給你二叉樹的根節點 root &#xff0c;請你采用前序遍歷的方式&#xff0c;將二叉樹轉化為一個由括號…
閱讀更多...
從零開始學習typescript——運算符(算術運算符、賦值運算符、比較運算符)

從零開始學習typescript——運算符(算術運算符、賦值運算符、比較運算符)

算術運算符 算術運算符主要是針對數值類型和長整型&#xff1b;包括有加法、減法、乘法、除法、自增、自減等運算 加法&#xff08;&#xff09; let x:number1let y:number 2console.log(xy)減法&#xff08;-&#xff09; let x:number1let y:number 2console.log(y-x)乘法…
閱讀更多...
晶振有哪幾種？晶振旁邊的兩個電容起什么作用？

晶振有哪幾種？晶振旁邊的兩個電容起什么作用？

晶振可以分為普通晶振、溫補晶振、壓控晶振、恒溫晶振、差分晶振。 普通晶振通常用作微處理器的時鐘器件&#xff0c;主要應用于那些穩定度要求不要的設備中&#xff0c;例如電視機、微波爐。 溫補晶振&#xff0c;在晶振內部采取了對晶體頻率、溫度特性進行補償&#xff0c;已…
閱讀更多...
軟件工程理論與實踐 (呂云翔) 第十三章 軟件測試方法與過程課后習題及其答案解析

軟件工程理論與實踐 (呂云翔) 第十三章 軟件測試方法與過程課后習題及其答案解析

第十三章 軟件測試方法與過程 1.判斷題 &#xff08;1&#xff09;白盒測試無須考慮模塊內部的執行過程和程序結構&#xff0c;只需了解模塊的功能即可。() 解析&#xff1a;白盒測試需要考慮模塊內部的執行過程和程序結構&#xff0c;以便設計測試用例和覆蓋代碼路徑。 &a…
閱讀更多...
軟文推廣有什么作用？媒介盒子分享

軟文推廣有什么作用？媒介盒子分享

數字時代&#xff0c;品牌方以往的營銷打法可能需要應時而變&#xff0c;傳統的廣告模式很難將品牌推廣出去&#xff0c;原因就在于傳統廣告的成本高昂并且針對性較弱&#xff0c;而軟文推廣能夠通過較低的成本將產品或品牌信息送到消費者面前&#xff0c;今天媒介盒子就來分享…
閱讀更多...
58同城算法工程師一面＆二面 面試題

58同城算法工程師一面＆二面 面試題

來源&#xff1a;投稿 作者&#xff1a;LSC 編輯&#xff1a;學姐 一面 40min 1.Gbdt和xgboost的區別 XGBoost是對GBDT的改進和擴展&#xff0c;它提供了更高的效率、更好的性能、正則化技術、內置特征選擇等功能。 (1)正則化: GBDT使用基本的樹模型&#xff0c;并在每一輪…
閱讀更多...
vue3.0 + qiankun遇到的問題

vue3.0 + qiankun遇到的問題

進入子應用再回到主應用切換動態路由時 TypeError: Cannot read properties of undefined (reading ‘appWrapperGetter’) application ‘plat’ died in status UNMOUNTING: instance.$destroy is not a function 第一個報錯是因為子應用切走時沒有銷毀 vue的實例&#xff0…
閱讀更多...
常用RFC規范匯總

常用RFC規范匯總

官網&#xff1a;https://www.rfc-editor.org/ The RFC Series (ISSN 2070-1721) contains technical and organizational documents about the Internet, including the specifications and policy documents produced by five streams: the Internet Engineering Task Force …
閱讀更多...
TCP/IP

TCP/IP

分層模型 TCP 傳輸控制協議 UDP 用戶數據包協議 四層 應用層 負責發送/接收消息 傳輸層 負責拆分和組裝 .期間會有編號 網絡層 TCP/UDP 屬于網絡層, 不會判斷和處理編號 數據鏈路層 以太網 ,網絡設備 TCP 連接 TCP連接需要端口,進行通信 Java 通過Socket 接收消息 發送 …
閱讀更多...
基于SpringBoot+Vue的體檢預約管理系統

基于SpringBoot+Vue的體檢預約管理系統

基于SpringBootVue的體檢預約管理系統的設計與實現~ 開發語言&#xff1a;Java數據庫&#xff1a;MySQL技術&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系統展示 主頁 管理員界面 用戶界面 摘要 體檢預約管理系統是一種基于Spring Boot…
閱讀更多...
Vue3常用操作

Vue3常用操作

一、Vue3項目構建 1、安裝最新版本vue npm create vuelatest 2、選擇需要的配置 3、進入項目 cd 項目名稱 4、下載依賴 npm install 5、啟動項目 npm run dev
閱讀更多...
chatGLM3微調

chatGLM3微調

文章目錄 一、問答數據集生成器使用設置問題啟動使用產出效果 二、進行微調第一步&#xff1a;下載模型第二步&#xff1a;項目準備2.1 下載項目2.2 然后使用 pip 安裝依賴2.3 開始 第三步進行微調3.1安裝相關依賴3.2準備數據集&#xff0c;并且上傳3.3對數據集進行預處理3.4 進…
閱讀更多...
如何使用技術SEO來優化評論

如何使用技術SEO來優化評論

你在網上購買嗎&#xff1f;我的意思是&#xff0c;在當今時代&#xff0c;誰不這樣做&#xff1f;作為買家&#xff0c;無論您想購買什么&#xff0c;您都了解全面和高質量評論的價值。這是您在決定是否購買產品時考慮的重要因素。 這就是為什么許多人在網上購物之前使用評論…
閱讀更多...
移動端click事件、touch事件、tap事件的區別

移動端click事件、touch事件、tap事件的區別

在移動端&#xff0c;有三種常見的事件類型&#xff0c;click事件、touch事件、tap事件。它們的區別如下&#xff1a; click事件&#xff1a;click事件是在用戶點擊屏幕的時候觸發&#xff0c;如果是移動設備&#xff0c;則會在用戶點擊屏幕的同時觸發touch事件。但是&#xff…
閱讀更多...
【開源】基于Vue和SpringBoot的康復中心管理系統

【開源】基于Vue和SpringBoot的康復中心管理系統

項目編號&#xff1a; S 056 &#xff0c;文末獲取源碼。 \color{red}{項目編號&#xff1a;S056&#xff0c;文末獲取源碼。} 項目編號&#xff1a;S056&#xff0c;文末獲取源碼。 目錄 一、摘要1.1 項目介紹1.2 項目錄屏 二、功能模塊2.1 普通用戶模塊2.2 護工模塊2.3 管理員…
閱讀更多...
uni-app中vue3+setup實現下拉刷新、上拉加載更多效果

uni-app中vue3+setup實現下拉刷新、上拉加載更多效果

在小程序或各類app中&#xff0c;下拉刷新和上拉加載更多是極為常見和使用非常頻繁的兩個功能&#xff0c;通過對這兩個功能的合理使用可以極大的方便用戶進行操作。 合理的設計邏輯才能更容易挽留住用戶&#xff0c;因為這些細節性的小功能點就變得極為重要起來。 那么在uni…
閱讀更多...
基于WEB的停車場管理系統的設計和實現【附源碼】

基于WEB的停車場管理系統的設計和實現【附源碼】

基于WEB的停車場管理系統的設計和實現 摘 要 隨著現代社會的快速發展&#xff0c;人民生活水平快速提高&#xff0c;汽車的數量飛速增加&#xff0c;與此同時停車問題也越來越受到人們的關注&#xff0c;為了實現對停車場進行有效的管理&#xff0c;結合一些停車場的模式和現狀…
閱讀更多...
游戲被攻擊了怎么辦

游戲被攻擊了怎么辦

隨著網絡技術和網絡應用的發展&#xff0c;網絡安全問題顯得越來越重要&#xff0c;在創造一個和諧共贏的互聯網生態環境的路途中總是會遇到各種各樣的問題。最常見的當屬于DDOS攻擊&#xff08;Distributed Denial of Service&#xff09;即分布式阻斷服務。由于容易實施、難以…
閱讀更多...
【LeetCode刷題】--40.組合總和II

【LeetCode刷題】--40.組合總和II

40.組合總和II 本題詳解&#xff1a;回溯算法 class Solution {public List<List<Integer>> combinationSum2(int[] candidates, int target) {int len candidates.length;List<List<Integer>> res new ArrayList<>();if (len 0) {return re…
閱讀更多...
最新文章

Copyright @ 2022~2023