HTML5 SVG 기반의 대화형 3D 태그 클라우드 jQuery 플러그인-H5 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-01-19 13:58:36

원래의

1442명이 탐색했습니다.

간단한 튜토리얼

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 구조

컨테이너를 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)!