簡要教程
svg3dtagcloud.js是一款基于HTML5?SVG的3D標簽云jQuery插件。該3D標簽云插件不需要額外的CSS樣式,可使用鼠標與標簽進行互動,并提供很多參數(shù)來控制標簽云的外觀。
?使用方法
使用該3D標簽云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。
<script src="js/jquery.min.js"></script> <script src="js/jquery.svg3dtagcloud.min.js"></script>
HTML結構
可以使用一個
容器來作為該3D標簽云的包裹容器
<p id="tag-cloud"></p>
初始化插件
首先你需要設置一個對象數(shù)組遍歷,數(shù)組中包含你需要制作的標簽和它們對應的鏈接地址。
var entries = [ { label: 'CodePen', url: 'http://codepen.io/', target: '_top' }, { label: 'three.js', url: 'http://threejs.org/', target: '_top' }, { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' }, { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' }, { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' }, { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' }, { label: 'Twitter', url: 'https://twitter.com/', target: '_top' }, { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' }, { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' }, { label: 'GitHub', url: 'https://github.com/', target: '_top' }, { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' }, { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' }, { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' }, { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' }, { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' }, { label: 'jQuery', url: 'https://jquery.com/', target: '_top' }, ];
然后可以通過下面的方法來初始化該3D標簽云插件。
$( '#tag-cloud' ).svg3DTagCloud( {entries: entries} );
配置參數(shù)
svg3dtagcloud.js插件的可用配置參數(shù)有:
entries:一個對象數(shù)組,用于初始化標簽。
width:標簽云的寬度。
height:標簽云的高度。
radius:標簽云的半徑。
radiusMin:標簽云的最小半徑。
bgDraw:是否使用背景色。
bgColor:背景顏色。
opacityOver:鼠標滑過標簽時的標簽透明度。
opacityOut:鼠標離開標簽時的標簽透明度。
opacitySpeed:標簽透明度過渡速度。
fov:how the content is presented。
speed:標簽云動畫的速度。
fontFamily:標簽云的字體。
fontSize:標簽云的字體大小。
fontColor:標簽云的字體顏色。
fontWeight:標簽云的字體的fontWeight。
fontStyle:標簽云的字體樣式。
fontStretch:標簽云的字體的fontStretch。
fontToUpperCase:是否轉(zhuǎn)換為大寫字體。
以上就是基于HTML5 SVG可互動的3D標簽云jQuery插件的內(nèi)容,更多相關內(nèi)容請關注PHP中文網(wǎng)(m.miracleart.cn)!

ホットAIツール

Undress AI Tool
脫衣畫像を無料で

Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ

AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中國語版
中國語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

Javascriptを使用せずにSVGを使用して畫像モザイク効果を?qū)g現(xiàn)するにはどうすればよいですか?以下の記事で詳しく解説していますので、お役に立てれば幸いです。

svg 畫像はプロジェクトで広く使用されていますが、次の記事では vue3 + vite で svg アイコンを使用する方法を紹介します。

svg は、畫像処理ソフトウェア、オンライン変換ツール、Python 畫像処理ライブラリを使用して jpg 形式に変換できます。詳細な紹介: 1. 畫像処理ソフトウェアには Adob??e Illustrator、Inkscape、GIMP が含まれます; 2. オンライン変換ツールには CloudConvert、Zamzar、Online Convert などが含まれます; 3. Python 畫像処理ライブラリなどがあります。

最新の Web フロントエンド開発の継続的な発展に伴い、実際の開発で広く使用されるテクノロジがますます増えています。その中でも、Vue.js は現(xiàn)在最も人気のある JavaScript フレームワークの 1 つであり、MVVM モデルに基づいており、豊富な API とコンポーネント ライブラリを提供し、応答性が高く、再利用可能で効率的な Web アプリケーションの開発を容易にします。 Vue.js3 の最新バージョンは、古いバージョンよりも優(yōu)れたパフォーマンスと豊富な機能を備えており、幅広い注目と研究を集めています。この記事では、

SVGを使用してファビコンにロゴを追加するにはどうすればよいですか?以下の記事ではSVGを使ってロゴ入りファビコンを生成する方法をご紹介しますので、ご參考になれば幸いです。

1. vite-plugin-svg-icons をインストールします。fast-glob 関連の依存関係もインストールする必要があります。そうでない場合、vite が npmrundev を?qū)g行すると、Cannotfindmodule'fast-glob' エラーが報告されます。npmifast-glob@3.x-Dnpmivite- plugin-svg. -icons@2.x-D 2. src/components/svgIcon の下に新しいコンポーネントindex.vueimport{computed}from'vue';cons を作成します。

1. svg-sprite-loadernpminstallsvg-sprite-loader--save-dev をインストールします。 2. src/components/svgIcon の下に新しいコンポーネントを作成します。index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon" 、props:{iconClass:{type:String},className:{type:String},},setup

Canvas 要素に HTMLImageElements を描畫するには、drawImage() メソッドを使用します。このメソッドは、src="mySVG.svg" を使用して Image 変數(shù)を定義し、ロード時にdrawImage を使用します。 varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";
