집 > 기사 > 웹 프론트엔드 > HTML5 SVG 기반의 대화형 3D 태그 클라우드 jQuery 플러그인

HTML5 SVG 기반의 대화형 3D 태그 클라우드 jQuery 플러그인

黄舟원래의: 2017-01-19 13:58:361368검색

간단한 튜토리얼

svg3dtagcloud.js는 HTML5 SVG 기반의 3D 태그 클라우드 jQuery 플러그인입니다. 이 3D 태그 클라우드 플러그인에는 추가 CSS 스타일이 필요하지 않으며 마우스를 사용하여 태그와 상호 작용할 수 있으며 태그 클라우드의 모양을 제어하는 많은 매개 변수를 제공합니다.

사용 방법

이 3D 태그 클라우드 플러그인을 사용하려면 jQuery 및 jquery.svg3dtagcloud.min.js 파일 도입이 필요합니다.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>

HTML 구조

dc6dce4a544fdca2df29d5ac0ea9906b 컨테이너를 3D 태그 클라우드의 래핑 컨테이너로 사용할 수 있습니다.

<div id="tag-cloud"></div>

플러그인 초기화

먼저 만들어야 하는 태그와 해당 링크 주소가 포함된 객체 배열 순회를 설정해야 합니다.

var entries = [ 
                { label: &#39;CodePen&#39;, url: &#39;http://codepen.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;three.js&#39;, url: &#39;http://threejs.org/&#39;, target: &#39;_top&#39; },
                { label: &#39;JS Compress&#39;, url: &#39;http://jscompress.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;TinyPNG&#39;, url: &#39;https://tinypng.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Can I Use&#39;, url: &#39;http://caniuse.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;URL shortener&#39;, url: &#39;https://goo.gl/&#39;, target: &#39;_top&#39; },
                { label: &#39;Twitter&#39;, url: &#39;https://twitter.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Gulp&#39;, url: &#39;http://gulpjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Browsersync&#39;, url: &#39;https://www.browsersync.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;GitHub&#39;, url: &#39;https://github.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Shadertoy&#39;, url: &#39;https://www.shadertoy.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;jsPerf&#39;, url: &#39;http://jsperf.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Foundation&#39;, url: &#39;http://foundation.zurb.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;CreateJS&#39;, url: &#39;http://createjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Velocity.js&#39;, url: &#39;http://julian.com/research/velocity/&#39;, target: &#39;_top&#39; },
                { label: &#39;jQuery&#39;, url: &#39;https://jquery.com/&#39;, target: &#39;_top&#39; },
            ];

그러면 다음 방법을 통해 3D 태그 클라우드 플러그인을 초기화할 수 있습니다.

$( &#39;#tag-cloud&#39; ).svg3DTagCloud( {entries: entries} );

구성 매개변수

svg3dtagcloud.js 플러그인의 사용 가능한 구성 매개변수는 다음과 같습니다.

항목: 초기화에 사용되는 객체 배열 태그.
width: 태그 클라우드의 너비입니다.
높이: 태그 클라우드의 높이입니다.
radius: 태그 클라우드의 반경입니다.
radiusMin: 태그 클라우드의 최소 반경입니다.
bgDraw: 배경색 사용 여부.
bgColor: 배경색입니다.
opacityOver: 마우스를 라벨 위에 놓을 때 라벨의 투명도입니다.
opacityOut: 마우스가 라벨을 벗어날 때 라벨이 투명해집니다.
opacitySpeed: 라벨 투명도 전환 속도.
fov: 콘텐츠가 표시되는 방식.
속도: 태그 클라우드 애니메이션의 속도입니다.
fontFamily: 태그 클라우드의 글꼴입니다.
fontSize: 태그 클라우드의 글꼴 크기입니다.
fontColor: 태그 클라우드의 글꼴 색상입니다.
fontWeight: 태그 클라우드 글꼴의 글꼴 가중치입니다.
fontStyle: 태그 클라우드의 글꼴 스타일입니다.
fontStretch: 태그 클라우드 글꼴의 FontStretch입니다.
fontToUpperCase: 대문자 글꼴로 변환할지 여부입니다.

위 내용은 HTML5 SVG 기반의 인터랙티브 3D 태그 클라우드 jQuery 플러그인의 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php. CN)!

성명：

이전 기사：매우 멋지고 창의적으로 분할된 SVG 텍스트 애니메이션 특수 효과다음 기사：매우 멋지고 창의적으로 분할된 SVG 텍스트 애니메이션 특수 효과

HTML5 SVG 기반의 대화형 3D 태그 클라우드 jQuery 플러그인

관련 기사