<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG可互动的3D标签云代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
#tag-cloud{
width:640px;
height:480px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="zzsc-container">
<div id='tag-cloud'></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>
<script>
$( document ).ready( function() {
var entries = [
{ label: 'Back to top', url: '#', target: '_top' },
{ label: 'Bootstrap', url: '#', target: '_top' },
{ label: 'Carousel', url: '#', target: '_top' },
{ label: 'Countdown', url: '#', target: '_top' },
{ label: 'Dropdown Menu', url: '#', target: '_top' },
{ label: 'CodePen', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'three.js', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Form Validation', url: '#', target: '_top' },
{ label: 'JS Compress', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'TinyPNG', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Can I Use', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'URL shortener', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Grid Layout', url: '#', target: '_top' },
{ label: 'Twitter', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'deviantART', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Gulp', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Browsersync', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'GitHub', url: 'https://github.com/', target: '_top' },
{ label: 'Shadertoy', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Tree View', url: '#', target: '_top' },
{ label: 'jsPerf', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Foundation', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'CreateJS', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Velocity.js', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'TweenLite', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'jQuery', url: 'http://www.moobnn.com/', target: '_top' },
{ label: 'Notification', url: '#', target: '_top' },
{ label: 'Parallax', url: '#', target: '_top' }
];
var settings = {
entries: entries,
width: 640,
height: 480,
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#494A5F',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 0.5,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15',
fontColor: '#fff',
fontWeight: 'normal',//bold
fontStyle: 'normal',//italic
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
fontToUpperCase: true
};
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings );
$( '#tag-cloud' ).svg3DTagCloud( settings );
} );
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
HTML5 SVG可互动的3D标签云代码.zip
版权申诉
118 浏览量
2022-11-18
22:13:23
上传
评论
收藏 41KB ZIP 举报
HTML5 SVG可互动的3D标签云代码.zip （8个子文件） 
HTML5 SVG可互动的3D标签云代码 jiaoben4041 css 
zzsc-demo.css 5KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js jquery.svg3dtagcloud.min.js 6KB jquery-2.1.1.min.js 82KB资源评论
